react 引用路径的简易调整，使用craco插件

       在react框架中，为了避免在引用路径中会用到../../，在层级较深的情况下，容易在引用路径时用到大量的.和/的组合，使代码看起来比较凌乱。而将相对路径改变为绝对路径，并用简单的符号代替某一特定层级文件名称，如@代替src，@@代替src/component，@redux代替src/redux......可以更加直观的看到文件的引用位置，无需翻出再翻进来引用文件。

       推荐使用方法2或3

1.拆分react-script，暴露配置文件，该过程不可逆

        create-react-app生成的项目看不到 webpack 相关的配置文件，需要先暴露出来,如下代码是可以将配置文件拆分成config和scripts文件

npm run eject

在config文件中找到webpack.config.js文件，在resolve中修改alias配置，即可更改路径

  resolve: {
      ...
      alias: {
        ...
        // 路径引用 @
        '@': path.resolve('src'),
        '@@': path.resolve('src/components'),
      }
    }

 弊端：过程不可逆，config和scripts文件将一直存在于该项目工程中。

2.借助第三方插件craco

         craco避免eject项目而对项目中webpack进行自定义配置的开发者

安装

npm install @craco/craco 
// npm install "@craco/craco"  由于版本问题可能需要用到""

修改package.json中的scripts (set POST=3005,修改默认端口号)

  "scripts": {
    "start": "set POST=3005 && craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

 根目录创建craco.config.js文件，与src同级

const path = require('path')
const resolve  = dir => path.resolve(__dirname,dir)

module.exports ={
  webpack:{
    alias:{
      "@":resolve("src"),
      "components":resolve("src/components")
    }
  }
}

3.antd 组件按需加载，支持 less，支持 类装饰器 语法，支持 webpack 别名并支持 vscode 支持路径补全

安装依赖

npm install antd -S
npm install @craco/craco craco-less @babel/plugin-proposal-decorators babel-plugin-import​​​​​​​ -D
// 在使用到@符号时需注意是否需要使用“”将其包含，"@craco/craco","@babel/plugin-proposal-decorators"

根目录下创建 craco.config.js文件，与src同级

const CracoLessPlugin = require('craco-less')
const path = require('path')

const pathResolve = pathUrl => path.join(__dirname, pathUrl)

module.exports = {
  webpack: {
    alias: {
      '@': pathResolve('src'),
      '@@': pathResolve('src/components'),
      '@redux': pathResolve('src/redux')
    }
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', style: true }],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
      	// 根据 less-loader 版本的不同会有不同的配置
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {},
            javascriptEnabled: true
          }
        }
      }
    }
  ]
}

修改package.json中的scripts

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

根目录下创建jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@@/*": ["src/components/*"],
      "@redux/*": ["src/redux/*"],
    },
    "experimentalDecorators": true
  },
  "exclude": ["node_modules", "build"]
}

该配置是应该在一个项目建成指出来搭建的，而后续项目有所调整或改变也可以通过craco来更改配置。