react+TS配置@开头路径提示和别名指南
作者：开发攻城狮
这段文章介绍了如何在项目中配置路径别名和提示,通过创建craco.config.js和修改package.json及path.tsconfig.js文件,简化文件引入路径,提升项目开发效率
我们在写项目的时候，引入文件有路径别名和提示会非常的爽，如下图，那就需要给项目配置路径别名和提示了。
第一步
yarn add @craco/craco -D
第二步
在项目根目录下，创建两个文件
craco.config.js path.tsconfig.json
第三步
打开刚创建的 craco.config.js
//对webpack配置别名
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src'),
},
},
}
第四步
修改 package.json
第五步
打开path.tsconfig.js 加入一下代码
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": [
"src/*"
],
"@assets/*":["src/assets/*"]
}
}
}
最后一步
导入到tsconfig.json文件中，重启项目，就大功告成啦！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。