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