IDE vscode识别webpack中alias配置路径

 

 

引言网上看到一篇关于 ctrl+鼠标左键无法识别别名路径的问题，最后有人回复的方法只能在ts项目中可以识别

https://segmentfault.com/q/1010000011911879

 

最后研究了下，发现可以配置解决

项目的webpack

    alias: {
      '@': require('path').resolve(__dirname, '../src')
    },

　　

package.json文件要引入jest的配置，在moduleNameMapper配置"^@/(.*)": "<rootDir>/src/$1"

"jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,mjs}"
    ],
    "setupFiles": [
      "<rootDir>/config/polyfills.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "^@/(.*)": "<rootDir>/src/$1"
    },
    "moduleFileExtensions": [
      "web.js",
      "mjs",
      "js",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ]
  }

　

根目录中的tsconfig.json文件中配置path

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "module": "amd",
        "target": "ES6",
        "baseUrl": ".",
        "paths":{
            "@/*": ["src/*"]
        }
        
    },
    "exclude": [
        "node_modules"
    ],
    "include": [
        "./src/**/*"
    ]
}

　　

 

这样配置还有一个问题，任然无法通过文件夹名字识别下面的index.js ，需要的时候直接写全路径

错的

对的

 

参考https://medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010

以及https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string