0

这只是我今天的想法，我没有看到很多信息，所以我将分享这些奇怪的案例以及我如何亲自解决它们（如果有更好的方法请发表评论，但同时这可能对其他人有所帮助^^ )

在常规模块中，您可以执行以下操作来导出函数/库/对象/数据：

// 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变量是包的本地变量（每个模块/文件都被一个函数包装，其中module参数 = 局部变量），所以没有任何东西真正导出到包之外，只是由 webpack 很好地管理。

这意味着您也不能使用常规的 require/import 方法访问内容。

在某些情况下，您可能会发现有必要在webpack之外导出。（即你正在尝试使用 webpack 构建一个库，并且你希望它可以被其他人访问）。这基本上意味着您需要访问原始module变量，但 webpack 不会像使用__non_webpack_require__.

另请参阅：从外部 webpack 包导入运行时模块

4

1 回答 1

0

解决方案是创建我们自己的__non_webpack_module__（就像 webpack 使用__non_webpack_require__.

我是如何在捆绑包之外webpack.BannerPlugin注入一些代码的。缩小完成后，此代码会添加到构建之前，因此可以安全地保存。

在你的webpack.config.js：

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

同样，如果您使用的是 TypeScript，请在global.d.ts​​：

declare const __non_webpack_module__: NodeModule;

现在，您可以在代码中执行以下操作：

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

这将允许像往常一样从其他文件导入它

提示：您可能希望查看BannerPlugin以检查其他选项，例如include，exclude此变量仅在所需文件上生成等。

于 2019-10-03T08:48:35.373 回答