关于前端:react配置路径别名

配置 @门路别名简化门路解决

1. 装置批改 CRA 配置的包：npm i -D @craco/craco
2. 在我的项目根目录中创立 craco 的配置文件：craco.config.js，并在配置文件中配置门路别名
3. 批改 package.json 中的脚本命令
4. 在代码中，就能够通过 @ 来示意 src 目录的绝对路径
5. 重启我的项目，让配置失效

craco.config.js 文件中

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：应用 @ 示意 src 文件所在门路
      '@': path.resolve(__dirname, 'src'),
      '@scss': path.resolve(__dirname, 'src', 'assets', 'styles')
    },
  },
}

package.json 中：

// 将 start/build/test 三个命令批改为 craco 形式

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

vscode 辨认 @门路并给出门路提醒

jsconfig.json 中（TS 我的项目改成 tsconfig.json）

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {"@/*": ["src/*"]
    }
  }
}