自定义 CRA 的默认配置
craco 配置文档

• CRA 将所有工程化配置，都隐藏在了 react-scripts 包中，所以项目中看不到任何配置信息
• 如果要修改 CRA 的默认配置，有以下几种方案：
  1. 通过第三方库来修改，比如，@craco/craco （推荐）
  2. 通过执行 yarn eject 命令，释放 react-scripts 中的所有配置到项目中

craco配置

配置别名路径

实现步骤

1. 安装修改 CRA 配置的包：yarn add -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')
    }
  }
}

package.json

// 将 start/build/test 三个命令修改为 craco 方式
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

@别名路径提示

实现步骤

1. 在项目根目录创建 jsconfig.json 配置文件
2. 在配置文件中添加以下配置

代码实现

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

vscode会自动读取jsconfig.json 中的配置，让vscode知道@就是src目录

eject解包配置

配置别名

解包后 webpack.config.js

      alias: {
        //...
        "@":path.join(__dirname,'../src')
      },

此时@可以找到路径 但没有提示

配置提示

vscode设置搜索 Path-intellisense 打开 settings.json添加

  "path-intellisense.mappings": {
    "@":"{$workspaceRppt}/src"
  },

package.json同级下创建文件 jsconfig.json

{
  "compilerOptions":{
    "target":"ES6",
    "module":"commonjs",
    "allowSyntheticDefaultImports":true,
    "baseUrl":"./",
    "paths":{
      "@/*":["src/*"]
    }
  },
  "exclude": [
    "node_modules"
  ]
}