乐趣区

关于前端: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/*"]
    }
  }
}
退出移动版