Question

我有一个像这样的目录结构：

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

我的.babelrc看起来像这样：

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

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

Module build failed: Error: Couldn't find preset "es2015" relative to directory

.babelrc文件中是否有任何选项可以指定node_modules的路径？或者任何其他方法来解决这个问题？

很遗憾没有办法将node_modules移到root。

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

Answer 2

您正在寻找webpack中的resolve属性。

resolve可让您设置模块的源位置：

resolve: {
    modulesDirectories: ['build/node_modules']
},

`.babelrc`文件无法在嵌套的node_modules文件夹

2 个答案: