脚本宝典收集整理的这篇文章主要介绍了解决JS文件引用路径多层查找,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
一 问题
路径结构 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'
以上是脚本宝典为你收集整理的解决JS文件引用路径多层查找全部内容,希望文章能够帮你解决解决JS文件引用路径多层查找所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。