将 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。

Answer 1

如果我是你，我会从这里开始。这将为您提供一个非常小的 React 模板，您可以在其中进行逆向工程并开始学习如何在 webpack 构建中使用 React。 React Boilerplate 这对于快速轻松地入门非常有用，同时学习 webpack 以了解您将如何使用它。我一直发现 webpack 文档很难找到我需要的东西。希望对您有所帮助。

Answer 2

我遇到了同样的问题，在我删除 node_modules 目录并重新安装所有依赖项后，它似乎已经消失了。

Answer 3

我通过 nvm 解决了这个问题，尽管我通过 npm 重新安装了好几次都没用。我将节点版本更改为 5+，然后它会运行良好，尽管我已经在 5+ 节点环境中。那是想象。

Answer 4

我遇到了同样的问题。原来我是在给已经存在的class"Object"添加原型方法

将 webpack 与 babel 和 babel-preset-react 以及 babel-preset-es2015 一起使用

Using webpack with babel and babel-preset-react and babel-preset-es2015

javascript

reactjs

webpack

babeljs