-
npm install -g create-react-app
-
创建项目
创建一个新文件夹my-react-app,并在该文件夹下使用终端创建项目my-react-app
-
create-react-app my-react-app --template typescript
-
react项目默认隐藏了webpack相关配置,执行 -
npm run eject
-
浏览器中可以看到
-
-
配置路径别名
这里我们使用craco来配置路径别名,安装craco:
-
npm i @craco/craco
-
修改package.json中的启动脚本:
-
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}, -
在项目的根目录中创建craco.config.js,并配置路径别名:
-
const path = require('path')
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, 'src/'),
},
},
} -
并在tsconfig.json中增加配置:
-
{
"compilerOptions": {
"path": {
"@/*": ["./src/*"],
},
}
}
12-06
2万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
06-29
1万+
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
01-29
552
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
07-10
1180
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)