如何在 webpack tree shaking 中排除自定义构造函数？

Question

我在 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 期间排除这个 constructor/method？

Answer 1

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

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

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

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

如何在 webpack tree shaking 中排除自定义构造函数？

How to exclude a custom constructor in webpack treeshaking?

javascript

constructor

webpack

tree-shaking