IDE vscode识别webpack中alias配置路径-白红宇

IDE vscode识别webpack中alias配置路径

阅读量：6127 次

发布时间：2019-06-21

本文共 1832 字，大约阅读时间需要 6 分钟。

引言网上看到一篇关于 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": [      "
     
      /config/polyfills.js"    ],    "testMatch": [      "
      
       /src/**/__tests__/**/*.{js,jsx,mjs}",      "
       
        /src/**/?(*.)(spec|test).{js,jsx,mjs}"    ],    "testEnvironment": "node",    "testURL": "http://localhost",    "transform": {      "^.+\\.(js|jsx|mjs)$": "
        
         /node_modules/babel-jest",      "^.+\\.css$": "
         
          /config/jest/cssTransform.js",      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "
          
           /config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$" ], "moduleNameMapper": { "^@/(.*)": "
           
            /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/**/*"    ]}