一 问题
路径结构 0
0-1
0-1-0
0-1-2
0-1-2-0
0-1-2-0-0
0-2
0-2-0
如过0-1-2-0-0里面的文件引用0-2-0里面的文件:
(1)相对路径写法
../../../../0-2/0-2-0/file
(2)绝对路径写法
/0-2/0-2-0/file
使用相对路径引用每次引用都要花费精力写很长的路径查找;
而使用绝对路径会有安全性的问题(test)
二 解决方案
1. webpack alias
module.exports={
...
resolve: {
alias: {
src: path.resolve(__dirname,'./src'),
},
},
...
}
Question:
如果使用了ESlit,ESlint无法识别你自定义的路径变量,会报错
2.解决ESlint报错:
使用 eslint-import-resolver-webpack,告诉eslint,使用webpack的resolver来检查package是否引用正确
1.安装
npm install eslint-import-resolver-webpack --save
2.修改.eslintrc
配置示例:
module.exports = {
// ...
// eslint-import-resolver-webpack 让eslint,使用webpack的resolver来检查package是否引用正确
settings: {
"import/resolver": 'webpack',
},
};
alias同样会有在IDE中无法定位函数和模块的问题等智能提示无法使用的问题
更过配置请参考:eslint-import-resolver-webpack
3.智能路径提示
现在路径变量已经能正常工作了。但是在IDE下编辑有点问题:
(1)智能路径提示不能用了
解决方案:vscode jsconfig.json
jsconfig.json:https://code.visualstudio.com...
添加jsconfig.json
{
"compilerOptions": {
"target": "es6",
"baseUrl": ".",
"paths": {
"src": ["./src/*"],
}
},
"include": [
"src/**/*",
]
}
4.定位模块
解决方案:使用VScode插件Path Intellisense
https://marketplace.visualstu...
5.然后使用 'src/utils' 相当于 '/src/utils'