Я делаю библиотеку, похожую на Polymer Material. У меня есть отдельные файлы, которые я использую для создания одного файла ESM, CJS и UMD. Файл ESM является основным в package.json. У меня такая ситуация
Header
Icon-Button
Icon-Button
Значок кнопки использует усы, поэтому мне нужно включить его с помощью rollup-plugin-node-resolve. Затем я импортирую библиотеку в заголовок и создаю файл UMD, который импортируется в мое приложение, вот так ...
// Pug
script(src="/ui-components/header/dist/index.umd.js")
script(src="/ui-components/icon-button/dist/index.umd.js")
// Express
// @me/icon-button
// @me/header
const uiPath = path.join(__dirname, './node_modules/@me');
app.use('/ui-components', express.static(uiPath));
Я получаю следующее в консоли браузера при загрузке ...
Не удалось выполнить 'define' в 'CustomElementRegistry': имя «me-icon-button» уже использовалось в этом реестре.
Как библиотеки справляются с этим? Я подумал об удалении плагина разрешения для усов и предположил, что он включен глобально. Однако кажется довольно обременительным заставить всех найти способ импортировать усы в окно, а не то, что делают большинство библиотек. Я также мог бы сделать что-то вроде этого вопроса. ..
customElements.get("me-icon-button")||customElements.define("me-icon-button", IconButton, {...});
Но повторение этого в моем коде тоже не кажется правильным.
Итак, как мне включить несколько веб-компонентов, которые ссылаются на другие похожие компоненты?
