create-react-app typescript 之根目录别名配置

我们在使用 CRA 创建 Typescript  React 项目的时候，有时候希望自己配置自定义Webpack选项，这时候如果使用CRA自带的 eject 命名，你会发现项目文件目录结构会非常多，看的很不舒服。那么有没有其他的方法呢？这时候我们可以使用 react-app-rewired 。

---

第一步

使用CRA初始化项目后，安装 eact-app-rewired 和 customize-cra

npm i react-app-rewired customize-cra --save-dev

或者

yarn add react-app-rewired customize-cra -D

第二步

修改 package.json 里的配置

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

第三步

在根目录创建一个 config-overrides.js 文件，添加以下配置

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')

module.exports = override(
  // 配置路径别名
  addWebpackAlias({
    "@": path.resolve(__dirname, 'src')
  })
)

第四步

在根目录创建一个 paths.json 文件，添加以下配置（如果直接修改tsconfig.json中的path属性时，项目跑起来时会将path属性删除，不知道原因）

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

第五步

修改 tsconfig.json 里的配置

{
  ...
  "include": [
    "src"
  ],
  "extends": "./paths.json"
}

到这里就算完成了。