react中使用craco 配置别名路径

craco

react 本身把webpack 封装进了黑盒中，不能直接暴露，需要借助插件 craco

安装依赖

npm install @craco/craco
# 或
yarn add @craco/craco

根目录下创建

craco.config.js

// craco.config.js
const path = require('path');
const { name } = require('./package.json');
 
const pathResolve = pathUrl => path.join(__dirname, pathUrl);
 
module.exports = {
  reactScriptsVersion: 'react-scripts' ,
  webpack: {

    alias: {
      '@': pathResolve('src'),
      '@assets': pathResolve('src/assets'),
      '@components': pathResolve('src/components'),
      '@constants': pathResolve('src/constants'),
      '@containers': pathResolve('src/containers'),
      '@hooks': pathResolve('src/hooks'),
      '@mocks': pathResolve('src/mocks'),
      '@routes': pathResolve('src/routes'),
      '@router': pathResolve('src/router'),
      '@store': pathResolve('src/store'),
      '@services': pathResolve('src/services'),
      '@styles': pathResolve('src/styles'),
      '@types': pathResolve('src/types'),
      '@utils': pathResolve('src/utils'),
      '@contexts': pathResolve('src/contexts'),
      '@pages': pathResolve('src/pages'),
    },

  },
  devServer: {
    // 本地服务的端口号
    port: 3001,
    // 本地服务的响应头设置
    headers: {
      // 允许跨域
      'Access-Control-Allow-Origin': '*',
    },
  },
};

修改package.json文件

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

联想配置

在项目根目录下新增 jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"],
      "@components/*":["src/components/*"],
      "@pages/*":["src/pages/*"],
      "@utils/*":["src/utils/*"],
      "@store/*":["src/store/*"],   
      "@assets/*":["src/assets/*"],
      "@api/*":["src/api/*"],
      "@hooks/*":["src/hooks/*"],
      "@router/*":["src/router/*"], 
      "@config/*":["src/config/*"],
      "@contexts":["src/contexts"],
      "@styles/*":["src/styles/*"],
      "@types/*":["src/types/*"],
      "@services":["src/services"],
      "@router":["src/router"]
    }
  }
}