导出到 webpack 之外 [英] Exporting outside webpack

问题描述

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

This is just something I thought today and I didn't see a lot of information so I'm going to share this weird cases and how I personally solved them (if there's a better way please comment, but meanwhile this might help others ^^)

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

In a regular module, you would do something like this to export your function/library/object/data:

// 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 打包它，你会遇到这种情况.

When compiling the library usually babel or tsc are used, but if for any reason you want not only to compile (transpile) your library but also pack it using webpack, you will encounter this case.

如您所知，在 webpack 包中，module 变量是包的本地变量(每个模块/文件都被一个函数包裹，其中 module 是一个参数 = local变量)，所以没有任何东西真正被导出到包之外，只是由 webpack 很好地管理.

As you know, in a webpack bundle the module variable is local to the bundle (every module/file gets wrapped with a function where module is a parameter = local variable), so nothing really gets exported outside the bundle, is just nicely managed by webpack.

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

That means that you can't also access the contents using the regular require/import methods.

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

In some case you might find necessary to export outside webpack. (i.e. you are trying to build a library using webpack and you want it to be accessible by other people). This basically means you need to access the original module variable, but webpack doesn't expose it like it happened with __non_webpack_require__.

另见:从外部 webpack 包导入运行时模块

推荐答案

解决方案是创建我们自己的 __non_webpack_module__(就像 webpack 对 __non_webpack_require__.

The solution is to create our own __non_webpack_module__ (as webpack does with __non_webpack_require__.

我的做法是使用 webpack.BannerPlugin 将一些代码外部注入包中.此代码在缩小完成后被添加到构建中，因此它被安全地保存.

How I did it is using webpack.BannerPlugin to inject some code outside the bundle. This code is prepended to the build after the minification is done, so it's preserved safely.

在你的 webpack.config.js 中:

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

再说一次，如果您使用的是 TypeScript，请在​​ global.d.ts 中:

And again, if you are using TypeScript, in global.d.ts:

declare const __non_webpack_module__: NodeModule;

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

And now, you can do something like this in your code:

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

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

This will allow to import it as usual from other files

提示:您可能想查看 BannerPlugin 检查其他选项，如 include 或 exclude 所以这个变量只在所需的文件上生成，等等.

Tip: You might want to look at BannerPlugin to check other options, like include or exclude so this variable is only generated on the desired files, etc.

这篇关于导出到 webpack 之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！