react-Ts项目 配置路径别名@

1. 安装craco包

yarn add -D @craco/craco OR npm install @craco/craco --save

2. 在项目根目录中创建 craco 的配置文件：craco.config.js，并添加如下代码

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src'),
    },
  },
}

3.在项目根目录中新建path.tsconfig.json，并添加如下代码

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

4. 根目录的tsconfig.json 引入路径配置

{
  + "extends": "./path.tsconfig.json",
  "compilerOptions": {
    "target": "es5",

5.5. package.json 修改启动命令

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

6.测试导入