如何在 webpack 摇树中排除自定义构造函数？答案

【问题标题】：How to exclude a custom constructor in webpack treeshaking?如何在 webpack 摇树中排除自定义构造函数？
【发布时间】：2021-08-29 16:08:44
【问题描述】：

我在一个 JS 文件中有以下代码

(() => {
    const Abc = (ab) => {
        this.ab = ab;
        this.k = () => {
            console.log(this.ab);
        };
    };
    window.MySpace = window.MySpace || {};
    window.MySpace.abc = new Abc('some var');
})();

我使用 webpack 5 作为我的打包工具。在此构造函数之后加载的另一个文件中，当我尝试使用 window.Myspace.abc.k 时，它引发了错误。通过一点调查，我能够理解输出文件没有k，这是TreeShaking机制的结果。

如何告诉 webpack 在 treeshaking 期间排除这个构造函数/方法？

【问题讨论】：

你一开始就不应该在这样的箭头函数上使用new...！？

标签： javascript webpack constructor tree-shaking

【解决方案1】：

window.MySpace.abc = new Abc('some var');

Abc 是一个箭头函数。箭头函数不能用作构造函数，所以这行代码会抛出异常，因此不会将任何内容分配给 window.MySpace.abc。

要解决这个问题，请使用常规函数：

function Abc(ab) {
  this.ab = ab;
  this.k = () => {
    console.log(this.ab);
  };
};

【讨论】：