如何防止特定功能包含在捆綁包中？

Question

假設我有一些 JavaScript 代碼要在 Node 服務器和瀏覽器客戶端上使用。 它定義了幾個對雙方都有幫助的類。 我想避免自己必須編寫兩次通用代碼或將客戶端和服務器特定代碼拆分為子類。

webpack（或任何其他打包程序）中有沒有辦法將特定功能標記為忽略？

例如，在下面的代碼片段中，注釋/* webpack-dont-pack */會阻止函數serverOnly被編譯到客戶端構建中（類似於 eslint 或 ts 忽略注釋）。

class SomeClass {
  constructor(arg1, arg2) {
    // init
  }

  commonFunction(arg1) {
    // do something
  }

  /* webpack-dont-pack */
  serverOnly(serverArg) {
    // how can this function be excluded from a specific webpack bundle?
  }
}

優選地，客戶端的捆綁包將排除功能serverOnly並且服務器構建將包含此功能。 請注意，在這種情況下，“客戶端”和“服務器”的使用是任意的。 更多的是關於兩個捆綁包可以有不同的代碼。

Answer 1

您可以在類的模塊中使用繼承和條件導出，沿着這些線：

class BaseClass {}

class ClientClass extends BaseClass {}

class ServerClass extends BaseClass {
    method() {
        console.log("I have my methods");
    }
}

const Foo = (process.env.production === "true" ? ServerClass : ClientClass);

export { Foo as MyClass };

如果production環境方法未設置為“true”，則該方法（或者更確切地說是ServerClass ）應該從捆綁包中搖出。 我認為。