出口外 webpack

Question

這只是我今天的想法，我沒有看到很多信息，所以我將分享這些奇怪的案例以及我如何親自解決它們（如果有更好的方法請發表評論，但同時這可能對其他人有所幫助^^ )

在常規模塊中，您可以執行以下操作來導出函數/庫/對象/數據：

// regular NodeJS way:
module.exports = data;

// ES6 way
// (will get transpiled to the regular way using the module variable by webpack)
export data;
default export data;

編譯庫時通常使用babel或tsc ，但如果出於某種原因您不僅要編譯（轉譯）您的庫，還要使用 webpack 打包它，您會遇到這種情況。

如您所知，在 webpack 包中， module變量是包的本地變量（每個模塊/文件都用 function 包裝，其中module是參數 = 局部變量），所以沒有任何東西真正導出到包之外，只是很好地由webpack。

這意味着您也不能使用常規的 require/import 方法訪問內容。

在某些情況下，您可能會發現有必要在 webpack之外導出。 （即您正在嘗試使用 webpack 構建一個庫，並且您希望其他人可以訪問它）。 這基本上意味着您需要訪問原始module變量，但是 webpack 不會像__non_webpack_require__那樣暴露它。

另請參閱： 從 webpack 包外部導入運行時模塊

Answer 1

解決方案是創建我們自己的__non_webpack_module__ （就像 webpack 對__non_webpack_require__所做的那樣。

我是如何使用webpack.BannerPlugin在捆綁包之外注入一些代碼的。 縮小完成后，此代碼會添加到構建之前，因此可以安全地保存。

在您的webpack.config.js ：

plugins: [
  new BannerPlugin({
    raw: true,
    banner: `const __non_webpack_module__ = module;`,
  }),
]

同樣，如果您在global.d.ts中使用 TypeScript：

declare const __non_webpack_module__: NodeModule;

現在，您可以在代碼中執行以下操作：

__non_webpack_module__.exports = /* your class/function/data/whatever */

這將允許像往常一樣從其他文件導入它

提示：您可能希望查看BannerPlugin以檢查其他選項，例如include或exclude ，因此此變量僅在所需文件上生成等。