Как создать библиотеку веб-пакетов, которая прикреплена к пространству имен окна ["MyCompany"]

Question

Я пытаюсь собрать модуль UMD с помощью Webpack. Модуль будет скомпилирован в современные фреймворки, но мы также хотим, чтобы он хорошо работал в существующих продуктах, где он может быть загружен через Require JS или даже введен через тег <script>. Для последнего я хочу прикрепить его к существующему объекту в окне и не перезаписывать этот объект. Например: window.MyCompany.MyModuleA

Другие модули могут быть построены с использованием этой техники, если я смогу заставить ее работать. Таким образом, у нас может быть следующий сценарий:

window.MyCompany.MyModuleA
window.MyCompany.MyModuleB

Если window.MyCompany.MyModuleB загружен с отложенной загрузкой, я не хочу, чтобы он переопределял содержащий объект window.MyCompany или любые ранее прикрепленные дочерние объекты / модули.

Я смог сконфигурировать свою конфигурацию веб-пакета для экспорта, 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

Answer 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/"),
},