解决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'