使用webpack、babel、babel-preset-react和babel-preset-es2015

Question

我正在尝试将我的React/ES6代码进行转译，而我之前使用的是browserify。由于新版的babel 6发布以及大部分教程已经过时，我很难创建一个webpack构建。

以下是我.babelrc文件中的代码：

{
  "presets": ["react"]
}

但是当我将它改为这样：

{
  "presets": ["es2015", "react"]
}

出现了神秘的错误提示：

ERROR in ./client/App.js Module build failed: Error: You gave us a visitor for the node type "NumericLiteral" but it's not a valid type

这是我的 webpack.config.js 文件，如果有帮助的话：

module.exports = {
  entry: "./client/App.js",
  output: {
    filename: "public/bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      }
   ]
  }
};

我是否忽略了什么显而易见的东西？我也交换了预设的顺序，但似乎没有任何区别。在我的节点模块中，我有 babel-core、babel-loader、babel-preset-es2015、babel-preset-react 和 webpack。

- syu15

---

你看过 Github 存储库中 故障排除 部分了吗？ - Rik

Answer 1

我曾经也遇到过同样的问题，删除node_modules目录并重新安装所有依赖项后，问题似乎已经解决了。

- vially

---

哇，这确实对我有用。这是npm安装的某种bug还是别的什么问题？我以前从未遇到过这个问题。 - syu15

说实话我也不知道，但我记得一段时间前我遇到了另一个babel的bug，当时删除了node_modules并重新安装后就解决了。所以这似乎与babel有些关联。 - vially

在我重新安装了 babel-cli (npm -g uninstall babel-cli && npm -g install babel-cli) 后，工作正常。 - Cracker

Answer 2

我曾经遇到过同样的问题。后来发现是我在已经存在的“Object”类中添加了一个原型方法。

- Jamey McElveen

Answer 3

如果我是你，我会从这里开始。这将为你提供一个非常简单的React模板，你可以通过反向工程开始学习如何在webpack构建中使用React。React Boilerplate 这对于快速入门和学习webpack以及你将要使用它非常有用。我一直觉得webpack文档很难理解我所需要的内容。希望这能帮到你。

- nf071590

Answer 4

我通过使用 nvm 解决了这个问题，即使我已经多次重新安装了 npm 也没有用。我将 Node 版本更改为 5+，然后它就可以正常运行，尽管我已经在 5+ 的 Node 环境中了。这就是想象力。

- carlos.guo