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

Posted 2023-03-07

【中文标题】将 webpack 与 babel 和 babel-preset-react 和 babel-preset-es2015 一起使用

【英文标题】：Using webpack with babel and babel-preset-react and babel-preset-es2015

【发布时间】：2016-02-04 02:13:15

【问题描述】：

我正在尝试转编译我的 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。

【问题讨论】：

你看过github repo的troubleshoot section吗？

【参考方案1】：

我有同样的问题。原来我正在向已经存在的“Object”类添加一个原型方法。

【参考方案2】：

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

【参考方案3】：

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

【讨论】：

哇，这对我真的有用。是某种 npm 安装错误还是其他什么？我以前从未遇到过这个问题。

老实说，我不知道，但我记得不久前偶然发现了另一个 babel 错误并删除了 node_modules 并重新安装了所有修复它的东西。所以好像和babel有点关系。

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

【参考方案4】：

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