如何构建附加到 window["MyCompany"] 命名空间的 webpack 库答案

【问题标题】：How to build a webpack library that is attached to window["MyCompany"] namespace如何构建附加到 window["MyCompany"] 命名空间的 webpack 库
【发布时间】：2020-06-06 22:40:11
【问题描述】：

我正在尝试使用 Webpack 构建 UMD 模块。该模块将被编译成现代框架，但我们也希望它在现有产品中运行良好，它可以由 RequireJS 加载，甚至通过<script> 标签注入。对于后者，我想将它附加到窗口上的现有对象而不覆盖该对象。例如： window.MyCompany.MyModuleA

如果我能让它工作，其他模块可以使用这种技术构建。所以，我们可以有以下场景：

window.MyCompany.MyModuleA
window.MyCompany.MyModuleB

如果 window.MyCompany.MyModuleB 是延迟加载的，我不希望它覆盖包含对象 window.MyCompany 或任何以前附加的子对象/模块。

我已经能够将我的 webpack 配置配置为导出 window.MyCompanyMyModuleA，但是如果不覆盖它，我无法获取在窗口上已经存在的对象上定义的模块。这是我最新的配置：

output: {
  library: "MyModuleA",
  libraryTarget: "umd",
  libraryExport: "MyCompany"
  ...
}

我还尝试了此处提到的各种配置，但均未成功。 https://webpack.js.org/configuration/output/#outputlibraryexport

我的后备计划是只定义目标，使其以window.MyCompanyMyModuleA 附加到窗口，然后使用自调用函数设置方便的公司范围对象window.MyCompany，但我希望我可以让它更干净一些，并在构建时处理它。

还尝试了以下方法，window.MyCompany 已定义，但 window.MyCompany.MyModuleA 未定义。 https://github.com/webpack/webpack/tree/master/examples/multi-part-library

【问题讨论】：

标签： webpack module

【解决方案1】：

知道了！

改为使用命名入口点，然后使用数组创建命名空间对象并附加模块，如下所示：

entry: {
   MyModuleA: "./src/my-module-a.ts"
},

和

output: {
  library: ["MyCompany", "[name]"],
  libraryTarget: "umd",
  filename: "my-module-a.js",
  path: path.resolve(__dirname, "dist/umd/"),
},

【讨论】：