1.安装 npm i customize-cra react-app-rewired
2.根目录新建 config-overrides.js
const path = require('path')
const { override, addWebpackAlias } = require('customize-cra')
// 添加 @ 别名
const webpackAlias = addWebpackAlias({
'@': path.resolve(__dirname, 'src'),
})
// 导出要进行覆盖的 webpack 配置
module.exports = override(webpackAlias)
3.根目录新建 path.tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
4.根目录中的 tsconfig.json 引入路径配置
{
+"extends": "./path.tsconfig.json",
"compilerOptions": {
"target": "es5",
5.在 package.json 中修改启动命令
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
"eject": "react-scripts eject"
},
搞定。在项目中使用@来爽一下吧~