javascript - `.babelrc` 文件在嵌套的 node_modules 文件夹中找不到预设

Question

我的目录结构是这样的:

> build
    > node_modules
    > webpack.config.js
> .babelrc
> .gitignore

我的 .babelrc 看起来像这样:

{
    "presets": ["es2015", "stage-0", "react"]
}

目前我收到以下错误...

模块构建失败:错误:找不到相对于目录的预设“es2015”

.babelrc 文件中是否有任何选项允许我指定 node_modules 的路径？或任何其他方式来解决此问题？

• 遗憾的是，无法将 node_modules 移出到根目录。

Answer 1

不幸的是，目前 .babelrc 中没有选项来控制 Babel 加载模块的方式。但是在各种情况下，有一些变通方法可以解决该问题。

Babel 实际上接受字符串和(模块)对象作为预设和插件，因此您可以传递模块名称(在这种情况下 Babel 将尝试使用自己的机制解析和加载它)，或者您可以加载模块自己并将其直接传递给 Babel。

问题是如果你使用 .babelrc，因为它是 JSON，你显然只能传递模块的名称，这使你受制于 Babel 的内置模块加载机制。

如果你使用 webpack，你可以完全放弃 .babelrc，直接在 webpack 配置中将选项传递给 Babel，像这样:

query: {
  presets: [
    'babel-preset-es2015',
    'babel-preset-react',
    'babel-preset-stage-0',
  ].map(require.resolve),
}

参见:How to set resolve for babel-loader presets

如果你直接使用 Babel，在你自己的代码中，那么你仍然可以使用 .babelrc，但是改变读取它的代码，自己加载预设和插件。

例如，如果你有下面的代码来读取.babelrc:

var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config = JSON.parse(babelrc);

require('babel-core/register')(config);

您可以将其更改为:

var fs = require('fs');
var babelrc = fs.readFileSync('./.babelrc');
var config = JSON.parse(babelrc);

config.presets = config.presets.map(function(preset) {
  return require.resolve('babel-preset-' + preset);
});
config.plugins = config.plugins.map(function(plugin) {
  return require.resolve('babel-plugin-' + plugin);
});

require('babel-core/register')(config);