在 webpack 2 中实现 Tree Shaking 导致错误答案

【问题标题】：implementing Tree shaking in webpack 2 causing error在 webpack 2 中实现 Tree Shaking 导致错误
【发布时间】：2017-07-01 01:13:47
【问题描述】：

我最近重构了我的应用程序以使用 webpack v2。运行 webpack -p 后，我注意到我的构建大小实际上增加了 ~32kb。我认为它没有实现摇树。因此，在我的 .babelrc 文件中，我更改了以下代码：

  "presets": [
    "react",
    "es2015",
    "stage-0",
  ]

到 ==>

  "presets": [
    ["es2015", { "modules": false }],
    "react",
     "stage-0",
  ]

但现在我收到以下错误：

> webpack -p

C:\Users\jasan\Downloads\app\webpack.config.babel.js:1
(function (exports, require, module, __filename, __dirname) { import webpack fro
m 'webpack';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at loader (C:\Users\jasan\Downloads\app\node_modules\babel-register\lib\n
ode.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (C:\Users\jasan\D
ownloads\app\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (C:\Users\jasan\Downloads\app\node_modules\webpack\bin\c
onvert-argv.js:96:18)

【问题讨论】：

你有安装 babel-register 和 babel-core 吗？
也只有在你启用 uglifyjs 的情况下才能使用 tree-shaking
babel-register 和 babel-core 已安装。实现了uglifyjs插件。
你试过这个命令node -r babel-register node_modules/.bin/webpack -p吗？
我刚刚做了，结果是：C:\Users\jasan\Downloads\app\node_modules\.bin\webpack:2 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") ^^^^^^^ SyntaxError: missing ) 在 Module._compile (module.js) 的 Object.exports.runInThisContext (vm.js:76:16) 的参数列表之后:542:28) 在 Module._extensions..js (module.js:579:10) 在 Object.require.extensions.(匿名函数) [as .js]

标签： reactjs webpack babeljs webpack-2 native-module

【解决方案1】：

问题是，当 webpack 看到 webpack.config.babel.js 时，它会尝试使用带有预设 es2015 和 "modules": false 的 .babelrc，这意味着它会保留 import/export 语句原样。但是 node.js 无法理解这样的语法，所以你必须为 node 提供 CommonJS 模块。

一种可能的解决方案是直接使用query 参数将配置从.babelrc 移动到webpack-loader

module: {
  loaders: [
    { test: /\.js$/, 
      exclude: /node_modules/, 
      loader: "babel-loader", 
      query: {
        "presets": [
          "react",
          ["es2015", { "modules": false }],
          "stage-0"
         ]
      }    
    }
  ]
}

在.babelrc 中只留下用于将导入转换为 CommonJS 的插件：

{
  "plugins": ["transform-es2015-modules-commonjs"]
}

别忘了给package.json添加必要的插件

"babel-plugin-transform-es2015-modules-commonjs": "^6.22.0"

详情请查看此问题https://github.com/webpack/webpack/issues/1403

【讨论】：

好吧，那个改变带来了一个新的错误：ERROR in ./app/index.js Module build failed: SyntaxError: C:/Users/jasan/Downloads/app/app/index.js: Unexpected token (28:18) 26 | 27 | const manifest = { > 28 | 1: (state) => ({...state, staleReducer: undefined}), | ^ 29 | 2: (state) => ({...state, app: {...state.app, staleKey: undefined}})
@jasan 你在test babel-loader 字符串中有jsx 吗？
@jasan 它应该可以正常工作，因为从第 3 阶段开始支持扩展运算符 babeljs.io/docs/plugins/preset-stage-3
不，我实际上只是在测试中有 js 我刚刚尝试过 (js|jsx) 但同样的错误
能否分享一个产生错误的代码示例？

【解决方案2】：

在 webpack.config.js 中

使用const webpack = require('webpack');

而不是

import webpack from 'webpack';

【讨论】：