Webpack es2015 用 React 摇树

Posted 2023-02-22

【中文标题】Webpack es2015 用 React 摇树

【英文标题】：Webpack es2015 tree shaking with 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/…（不确定你是否能看到讨论）。当我得到它的工作时，我会更新这张票。

【参考方案1】：

它已更新并有效

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

【讨论】：

请注意['es2015', modules: false] 在一个单独的数组中。一开始我忽略了它。

您可以通过添加loose: true 来进一步优化它，就像这样presets: [['es2015', loose: true, modules: false], 'react']