修改

Question

我正试图找到一种方法来破坏我的模块并使用Babel和Webpack。

如果我从webpack文档（https://webpack.js.org/guides/tree-shaking/）获取示例代码并运行它，那么未使用的模块/函数/其他导出将标记为未使用的和谐导出，这是预期的结果。在使用-p参数（生产）运行webpack之后，webpack使用UglifyJS删除死的和未使用的代码（到树抖动）。

现在，如果我将babel-loader添加到我的webpack配置文件中，我的ES2015模块将被转换，但现在不再标记为未使用的导出。

例如：

math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

app.js（我的输入文件）

import {square} from './math.js'

通过webpack运行此没有 babel-loader，cube函数将被标记为未使用并在编译生产后删除（-p）。

通过webpack WITH babel-loader运行，cube函数将不会被标记为未使用，并将保留在已编译的包中。

我错过了什么？

修改

这是一个可以重现情况的演示回购

https://github.com/Milanzor/babel-and-treeshaking-question

更新

如果我添加.babelrc：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "entry",
      "debug": true,
      "targets": {
        "browsers": ["last 2 versions"]
      }
    }]
  ]
}

我得到相同的结果，但如果我将modules: false添加到preset-env选项，Babel不会将模块编译为ES5，Webpack会将模块标记为未使用。

结论

我需要找到一种方法告诉Webpack我的模块是用Babel编译的，或者我需要找一种方法告诉Babel自己扫描未使用的代码。

Answer 1

Webpack的内置树摇动仅适用于ES6模块语法。如果您使用的是Babel的默认设置，Babel会将ES6模块编译为CommonJS模块，而Webpack则无需使用。

一般来说，使用Webpack的人都希望将Public Class Form2 Dim _userDefined(0 To 3) As Double Private Sub Btn_transmitValues_Click(sender As System.Object, e As System.EventArgs) Handles Btn_transmitValues.Click _userDefined(0) = Txt_1.Text _userDefined(1) = Txt_2.Text _userDefined(2) = Txt_3.Text _userDefined(3) = Txt_4.Text Me.Dispose() End Sub Public ReadOnly Property getUserDefined As Double() Get Return _userDefined End Get End Property End Class传递给他们用于ES6的预设（可能是modules: false？），这样做

preset-env

或者您可以考虑使用像https://github.com/indutny/webpack-common-shake这样的插件来为CommonJS模块启用树抖动。

更新

如果您正在使用Babel 7（以及{ presets: [ ['env', { modules: false }], ], }），那么@babel/preset-env选项现在在Webpack中使用时会自动modules，因此不再需要此显式配置。

Webpack 3，Babel和Tree摇晃不起作用

math.js

app.js（我的输入文件）

修改

更新

结论

1 个答案:

更新