Webpack es2015 用 React 摇树答案

【问题标题】：Webpack es2015 tree shaking with ReactWebpack es2015 用 React 摇树
【发布时间】：2016-12-28 11:30:00
【问题描述】：

我想使用摇树功能似乎我们不需要安装babel-preset-es2015-webpack。我们仍然可以使用 babel-preset-es2015 并将模块标志设置为 false 以用于 es2015 预设。我更改了我的 webpack 配置，如下所示，这导致我的反应组件中的导入行出现“意外的令牌导入”错误。

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: [['es2015', {modules: false}], 'react']
        }
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
      }
    ]
  }

我也尝试将预设设置为

['es2015', 'react', {modules: false}]

然后我在控制台上得到了不同的错误：

 Module build failed: ReferenceError: [BABEL] C:\FE-Proj-Templates\webpack\main.js: Using removed Babel 5 option: foreign.modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules

如何将预设 es2015 设置为模块标志为 false 并使用 React 预设？

【问题讨论】：

您使用的是 webpack 2（测试版）吗？ Webpack 1 不支持 ES2015 模块（和摇树）。
是的，我正在使用 webpack 2
@NeginBasiri 你找到解决方案了吗？
@GuilhermeMattarBastos 还没有。我也评论了egghead.io/forums/lesson-discussion/topics/…（不确定你是否能看到讨论）。当我得到它的工作时，我会更新这张票。

标签： reactjs ecmascript-6 webpack babeljs

【解决方案1】：

它已更新并有效

presets: [['es2015', {modules: false}], 'react']

【讨论】：

请注意['es2015', {modules: false}] 在一个单独的数组中。一开始我忽略了它。
您可以通过添加loose: true 来进一步优化它，就像这样presets: [['es2015', {loose: true, modules: false}], 'react']