出口外 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 ，因此此变量仅在所需文件上生成等。