如何使用 webpack 捆绑基于 ES6 的 React 组件并将捆绑包保存在 ES6 中？答案

【问题标题】：How to bundle ES6 based React components and keep the bundle in ES6, using webpack?如何使用 webpack 捆绑基于 ES6 的 React 组件并将捆绑包保存在 ES6 中？
【发布时间】：2016-09-13 18:00:49
【问题描述】：

如何使用 webpack 打包使用 ES6 的 Reactjs 组件？生成的包应该在 ES6 中，而不应该被转译为 ES5。

有很多很好的 Reactjs/webpack 示例可用，但我发现所有这些都可以转换为 ES5。

【问题讨论】：

标签： reactjs ecmascript-6 webpack

【解决方案1】：

在没有 ES2015 预设的情况下运行 babel-loader 并添加 transform-react-jsx 插件：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel',
      query: {
        plugins: ['transform-react-jsx']
      }
    }
  ]
}

【讨论】：

感谢您的回答。我尝试过，但由于我尝试使用 ES6 导入而出现错误：第 1 行：意外的令牌您可能需要适当的加载器来处理此文件类型。 |从“反应”导入反应； |从 'react-dom' 导入 ReactDOM； |从'./Component'导入组件；我想这在使用 CommonJS 导入/导出时会起作用（顺便说一句，在我看来这是目前可接受的解决方案）？
@HelgiBorg Webpack 1.x 不支持import 语法。正确，您需要使用require，或添加transform-es2015-modules-commonjs 变换
我找到了这个例子：github.com/krasimir/react-webpack-starter。它使用 ES6，包括 ES6 导入，但转译为 ES5。通过破解 babel 预设，我设法让它吐出 ES6 捆绑代码。诀窍是将 babel-preset-es2015/index.js 文件精简为只有：require("babel-plugin-transform-es2015-modules-commonjs")。下一步将是找到或创建这样的预设。 -- 这当然只是一个小测试，会有问题。第一个是 UglifyJS 不支持 ES6。
@HelgiBorg 您应该将其添加为您问题的答案并将其标记为帮助未来读者的答案

【解决方案2】：

我发现了这个关于如何使用 React 等配置 Webpack 的非常好的示例：https://github.com/krasimir/react-webpack-starter。它使用 ES6，包括 ES6 导入，但转译为 ES5。

通过破解 babel 预设，我设法让它吐出 ES6 捆绑代码。我将文件 node_modules/babel-preset-es2015 更改为：

module.exports = {
  plugins: [
    require("babel-plugin-transform-es2015-modules-commonjs")
  ]
};

这当然不是一个可接受的解决方案，需要做的是找到或创建包含此的 Bable 预设。

在这之后我注意到的第一件事是 UglifyJS 不支持 ES6。我怀疑以后还会有其他问题，所以像我这样的新手应该坚持转译到 ES5 的时间再长一点。

【讨论】：