浪费在 Webpack / Babel 的 Voodoo 配置上的时间

Question

我得到的错误是：

ERROR in ./~/babel-core/package.json
Module parse failed: /Users/sigfried/Sites/git_projects/supergroup/node_modules/babel-core/package.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       "babel-core@^6.4.5",
 @ ./~/babel-core/lib/api/node.js 67:15-39
ERROR in ./~/globals/globals.json
Module parse failed: /Users/sigfried/Sites/git_projects/supergroup/node_modules/globals/globals.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
|   "builtin": {
|       "Array": false,
|       "ArrayBuffer": false,
 @ ./~/globals/index.js 1:17-42

我不会费心提供我的package.json和webpack.config.js因为我在遵循食谱时（盲目地，我承认 - 因此，标题中的"voodoo"）遵循来自如此多来源的食谱，我不知道该提供什么。最终让我克服这些错误的答案不在Stack Exchange上，所以我把它放在这里。

Answer 1

我听从了来自

Webpack 错误与 react，"您可能需要一个合适的加载器来处理这种文件类型"与 Webpack 和 Babel，这可能帮助我解决了其他问题，并且肯定帮助其他人得到同样的错误。不过，最终为我解决它的事情是：https://github.com/pixijs/pixi.js/issues/1854

我希望这一系列答案可以避免其他人不得不在这么多地方寻找。

---

为了回应这样的评论，即如果链接最终断开，这个答案就会变得毫无用处，我应该在这个答案中包含实际答案，我会这样做。但是，我建议您跳过此部分，如果它们仍然有效，则只使用上面的链接，因为它们包含 webpack.config.js 和 package 的完整示例.js并且可能会提醒您自己的问题。（或者，比我更了解 webpack 的人可以给出另一个提供真实解释的答案。我很乐意删除我的答案并选择那个。

第一个链接中提供的答案只是：

loaders选项应嵌套在module对象中。

上面的第二个链接给出了这样的答案：

您需要安装 es2015 预设：

npm install babel-preset-es2015
and then configure babel-loader:
{
    test: /.jsx?$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015']
    }
}

一个不太受欢迎的答案提供了这些链接：

• babeljs.io - 将 babel 与 webpack 一起使用

• babeljs.io - .babelrc 上的文档

• React-webpack-cookbook - 使用 webpack 配置 react

• 一个反应 webpack-example 存储库

我不知道为什么，最终帮助我的是添加一个 json 加载器（当然还有 npm --save-dev i json-loader。

module: {
  loaders: [{
    test: /.json$/,
    loader: 'json-loader'
  }]
}

根据下面的评论，json-loader 为我工作的事实可能意味着我做错了其他事情（比如捆绑 Babel 本身）。我可以再复制这个问题，但 json 加载器是不必要的。

---

跟进：我又看到了错误！当我在尝试解决其他问题时在我的一个源文件中尝试require（'babel-core'）时，它就出现了。