Question

如何使用webpack捆绑使用ES6的Reactjs组件？生成的包应该在ES6中，不应该转换为ES5。

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

Answer 1

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

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

Answer 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转移一段时间。

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

2 个答案: