巴贝尔化名。WebStorm不识别子目录

Question

最近，我从webpack路径别名转移到了babel插件-模块解析，因为它与测试框架集成得更好。

.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进行这种配置吗？

现在，我已经将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)，读取.babelrc文件为导出的配置生成resolve.alias部分，然后在首选项中显式地指向IntelliJ：

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
  }
});

这个解决方案允许我在一个地方(.babelrc)配置别名，同时让IntelliJ识别它们:)