在 webpack 外部导出答案

【问题标题】：Exporting outside webpack在 webpack 外部导出
【发布时间】：2019-10-03 08:48:35
【问题描述】：

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

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

// 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 是一个参数 = 局部变量），所以没有任何东西真正导出到bundle，由 webpack 很好地管理。

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

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

另请参阅：Importing runtime modules from outside webpack bundle

【问题讨论】：

你有没有想过使用npmjs.com/package/webpack-node-externals这可以让你排除/白名单等。
@Keith 感谢您的建议。但我认为这涵盖了一个不同的问题：从构建中排除模块。这个问题涉及的是关于在 webpack 包之外导出（以便可以从其他地方导入某些东西）
哦，对了。在那种情况下，我通常会把它放在globalThis
没错，这是一种方式，就像在浏览器的情况下在window 中设置一个全局对象......但它正在设置一个全局对象...... :-/
但这不是你在做什么，你设置一个全局调用 -> __non_webpack_module__ 。 This will allow to import it as usual from other files，当你说正常时，你是什么意思？ IOW：做 -> globalThis.__non_webpack_module__ 将是相同的。

标签： javascript node.js typescript webpack

【解决方案1】：

解决方案是创建我们自己的 __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，因此此变量仅在所需文件上生成等。

【讨论】：