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

【问题标题】：`.babelrc` file can't find presets in a nested node_modules folder`.babelrc` 文件在嵌套的 node_modules 文件夹中找不到预设
【发布时间】：2016-07-12 08:18:17
【问题描述】：

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

> 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 移至根目录。

【问题讨论】：

你已经安装了预设？如果没有，请在控制台上使用npm install babel-preset-es2015 --save
是的，如果 node_modules 文件夹位于根级别，则安装了所有工作，但我的问题是，这不是一个选项，有什么想法吗？
@Jai 我在同一条船上，你找到解决方案了吗？
@GaryChang 恐怕不会 :( 最后我们不得不更改文件夹结构。如果你能找到解决办法，我很想听听！
@Jai，是的，我解决了这个问题，至少对我自己而言。我已经发布了答案。

标签： javascript npm webpack babeljs

【解决方案1】：

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

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

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

如果你使用 webpack，你可以完全放弃.babelrc，直接在 webpack config 中将 options 传递给 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);

【讨论】：

【解决方案2】：

您正在 webpack 中寻找 resolve 属性。

resolve 允许您设置模块的源位置：

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

【讨论】：

这会影响 .babelrc 文件的源目录吗？