需求
项目技术栈:webpack + typescript + eslint
代码中多次使用相对路径导入模块,看起来复杂且不美观,如下:
import fetch from '../../../../utils/fetch';
如何将上面的代码进行优化呢?
import fetch from 'utils/fetch';
方案
step1: 配置webpack的resolve.alias
module.exports = {
entry: {
main:'./main.js',
},
output: {
path:__dirname+'/dist',
filename: '[name].js'
},
resolve:{
//配置别名,在项目中可缩减引用路径
alias: {
'utils': resolve('app/utils'),
'assets': resolve('app/assets')
}
},
plugins: []
};
step2: 配置tsconfig.json
{
compilerOptions: {
"baseUrl": ".",
"paths": {
"utils/*": ["app/utils/*"],
"assets/*": ["app/assets/*"],
}
}
}
ESLint 报错 import/no-unresolved
解决办法:
- 网上推荐【未尝试】
- 暴力解决:重启vscode【确实可以了,如果再碰到再说吧】