我们在使用 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"
}
到这里就算完成了。