Question

我最近从webpack路径别名转移到babel-plugin-module-resolved，因为它更好地与测试框架集成。

.babelrc

{
  "presets": [
    ["env", { "modules": false } ],
    "react",
    "stage-2",
    "flow"
  ],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "static": "./static",
        "common": "./src/common",
        "data": "./src/data"
      }
    }],
    ["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-sass"] }],
    "react-hot-loader/babel"
  ]
}

WebStorm会自动识别static/..的导入，但无法解析common/..和data/..等导入。

是否有可能以某种方式指示IDE有关此配置的信息？

P.S。现在我将src目录标记为资源根，但这不太合适。

Answer 1

我采取的一个选择是创建一个伪造的Webpack文件，该文件创建相同的别名。在代码库中留下不必要的文件，但解决了所有名称解析问题。

示例： webpack.junk.js

module.exports = {
  resolve: {
    alias: {
      'static': path.resolve(__dirname, './static'),
      '@common': path.resolve(__dirname, './src/common'),
      '@data': path.resolve(__dirname, './src/data'),
    },
  },
};

Answer 2

按照 SimplyComplexable 的解决方案（我无法对他的回复发表评论，抱歉），我创建了一个新的 webpack.intellij.js 来加载项目的 webpack 配置 (webpack.js)，读取 {{1} } 文件为导出的配置生成 .babelrc 部分，然后在首选项中显式地将 IntelliJ 指向此文件：

resolve.alias

这个解决方案允许我在一个地方 (const path = require('path'); const fs = require('fs'); const { merge } = require('webpack-merge'); const webpackConfig = require('./webpack.js'); const babelRc = JSON.parse(fs.readFileSync('./.babelrc').toString('utf8')); const aliases = {}; for (let i = 0; i < babelRc.plugins.length; i+=1) { if (Array.isArray(babelRc.plugins[i]) && babelRc.plugins[i][0] === 'module-resolver') { const a = babelRc.plugins[i][1].alias; for (const entry of Object.entries(a)) { aliases[entry[0]] = path.resolve(__dirname, entry[1]); } } } module.exports = merge(webpackConfig, { resolve: { alias: aliases } });) 配置别名，同时仍然让 IntelliJ 识别它们:)

Babel别名。 WebStorm无法识别子目录

2 个答案: