如何在 webpack treeshaking 中排除自定義構造函數？

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時，它引發了錯誤。 通過一點調查，我能夠理解 output 文件由於TreeShaking機制而沒有k 。

如何告訴 webpack 在 treeshaking 期間排除此構造函數/方法？

Answer 1

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

Abc 是箭頭 function。 箭頭函數不能用作構造函數，因此這行代碼會引發異常，因此不會將任何內容分配給 window.MySpace.abc。

要解決此問題，請使用常規 function：

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