前言
Typescript 不仅方便前端在开发阶段就能发现很多问题,同时也能给开发者很多提示。比如我们 Import 其他ESModule时,如果路径不对就会给出提示。
![image-20211212173057628](https://tva1.sinaimg.cn/large/008i3skNgy1gxb6ja8on1j31c2056t9v.jpg)
只有正确引用路径,Typescript才不会提示报错。但是使用这种相对路径引用方式,会出现层级过深的情况
![image-20211212173311946](https://tva1.sinaimg.cn/large/008i3skNgy1gxb6lpm3chj315u066q4h.jpg)
如果使用统一前缀引入,可以避免上述问题
【最终效果】
【项目目录结构】
原理
我们使用设置别名的方式解决上述问题,两个地方要同时修改,tsconfig使vscode显示不报错,webpack.js使打包编译不报错
- 修改tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths":{
"@/*":["src/*"]
}
},
"include": ["./src"]
}
- 修改编译工具配置文件,比如webpack.config.js、rollup.config.js等
{
resolve:{
alias:{
'@': path.resolve(__dirname, '..', 'src'),
}
}
}
实战
- tsconfig.json
{
"compilerOptions": {
...
"baseUrl": ".",
"paths":{
"@/*":["src/*"]
}
},
"include": ["./src"]
}
Webpack
- webpack.config.js
{
resolve:{
alias:{
'@': path.resolve(__dirname, '..', 'src'),
}
}
}
Rollup
- Rollup.config.js
npm install @rollup/plugin-alias
import alias from '@rollup/plugin-alias';
module.exports = {
plugins: [
alias({
entries: [
{ find: '@', replacement: 'src' },
]
})
]
};
Taro
- config/index.js
alias:{
"@/": path.resolve(__dirname, '..', 'src'),
}