Webpack - Как повторно использовать глобальное имя библиотеки, когда оно уже существует?

#javascript #webpack #bundle #webpack-4 #monorepo

#javascript #webpack #пакет #webpack-4 #monorepo

Вопрос:

Добрый вечер!

У меня есть этот monorepo с несколькими пакетами, где каждый из них объединен независимо с помощью Webpack.

До того, как это был monorepo, у меня был бы один файл bundle, и его можно было бы сделать доступным через глобальную переменную в браузере через output.library свойство. Теперь у меня есть следующее, поскольку у меня есть несколько записей:

 output: {
    library: "SC",
    // export itself to UMD format
    libraryTarget: "umd",
    umdNamedDefine: true,
    filename: "[name]/dist/organization-[name].js",
    // fix for https://github.com/webpack/webpack/issues/6525
    globalObject: `(typeof self !== 'undefined' ? self : this)`
  }

Проблема в том, что если я использую одну и ту же конфигурацию для каждого пакета и импортирую более одного в браузер с использованием тегов script, фактически будет доступен только последний скрипт, потому что он, по сути, каждый раз воссоздает глобальную переменную.

Есть ли способ повторно использовать его? Или, может быть, лучшее соглашение, которое я мог бы использовать здесь. Например, в node я импортирую каждый из них, используя имя пакета, но в браузере я чувствую, что все они должны находиться под одной и той же глобальной переменной.

Спасибо за любые предложения!

1. Поскольку вы объединяете свои скрипты по отдельности, переменные, определенные в одной области, не могут взаимодействовать с другими скриптами. Единственный способ, который я могу придумать, это назначить вывод объекту window. Хотя это кажется грязным.

2. Да, точно. Вот почему я пытаюсь найти хороший способ повторно использовать область, когда она уже существует.

Ответ №1:

Как упоминалось в проблеме, которую я создал в репозитории webpack, решение заключается в использовании следующего: library: ["MyLibrary", "[name]"]

Это сделает все пакеты доступными под одной и той же глобальной переменной MyLibrary , но разделенными их соответствующей записью (т.е. MyLibrary.entryOne и MyLibrary.entryTwo ).