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

问题描述

我在 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 期间排除这个构造函数/方法？

解决方法

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

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

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

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