通过网络包导出模块

Question

我正在开发一个 React 应用程序。在index.js导出一些变量，例如

export const a="Hello";
export const b=[1,2,3];

在 webpack.config 中.js：

...
output: {
...
library: "myApp",
libraryTarget: "window"
},
...

我知道window.myApp现在是一个module，其中包括从index.js导出的所有变量。我不知道的是上述工作原理。这个模块是如何创建的，为什么它只包括索引的导出.js而不是其他文件？如何，我可以包括来自另一个特定文件的导出吗？

Answer 1

您的模块是根据入口配置以及您配置的其他模块和插件创建的，并根据 webpackoutput配置中提供的配置转换为构建文件。

library设置与条目配置相关联，因此，如果您指定要index.js的条目，则从index.js中的导出在构建中可用

为了也公开从其他文件的导出，您可以从索引文件中导入和导出它们，例如

export { default as SomeFunction} from 'some-function.js';

根据webpack docs：

为 大多数库，指定单个入口点就足够了。而 多部分库是可能的，公开部分更简单 通过用作单个入口点的索引脚本导出。 不建议使用数组作为库的入口点。

libraryTarget指定模块的公开方式。例如，在您的情况下，您的模块在window对象上公开。

可以通过以下方式公开库：

• 变量：作为脚本标记(libraryTarget：'var'(提供的全局变量。

• this：可通过 this 对象 (libraryTarget：'this( 获得。

• 窗口：可通过浏览器(libraryTarget："window"(中的窗口对象访问。

• UMD：在 AMD 或 CommonJS 需要之后可用(libraryTarget：'umd'(。

如果设置了库而库目标未设置，则库目标默认为 输出配置文档中指定的 var。看 output.library目标那里的所有可用的详细列表 选项。

Answer 2

您有两种解决方案来包含其他文件

首先是在 webpack 模块中使用多个条目

module.exports = {
// mode: "development || "production",
entry: {
A: "./CompA",
B: "./CompB"
},

第二种方法是使用一个条目，就像您的解决方案一样，但需要添加包装.js

包装纸.js

import * as a from './CompA.js'
import * as b from './CompB.js'
export a,b 

你的包装器成为单个条目，你可以在其中访问以后的包装器.a，wrapper.b

module.exports = {
// mode: "development || "production",
entry: {
app: "./wrapper.js",
},