Как импортировать сгенерированный выходной файл webpack в приложение, в котором уже установлены модули, которые уже находятся в выходном файле?

Question

У меня есть 2 приложения, в которых уже установлены Highcharts

, и я разработал отдельный компонент реагирования, который использует библиотеку Highcharts.

Поэтому я использовал webpack для генерации этого компонента с его зависимостями для импорта в 2 приложения.

Я сделал это, чтобы сделать код DRY, поэтому мне не нужно писать код компонента в 2 приложения.

Как импортировать сгенерированный выходной файл из веб-пакета в эти приложения, не давая мне ошибки при повторной инициализации Highcharts?

Другими словами, как импортировать файл без каких-либо конфликтов с уже установленными библиотеками в Приложениях?

Обновление

Я хочу, чтобы библиотека находилась в комплекте с файлом при импорте в приложение, в котором нет библиотеки.

Обновление II

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

Answer 1

Если вы знаете, что в среде вашего кода уже есть какая-то библиотека, вы можете исключить эту библиотеку из пакета, используя externals : https://webpack.js.org/configuration/externals/

Допустим, мы делаем библиотека компонентов реакции, и нам нужно установить react, но мы знаем, что будем использовать наши компоненты в нашем приложении реакции, где react уже установлено.

Таким образом, мы можем пометить react как externals в нашей конфигурации webpack, например:

module.exports = {
  // ...
  externals: {
    react: 'React'
  }
  // ...
};

Также мы можем использовать DllPlugin для исключения любой библиотеки или любого кода из нашего пакета. https://webpack.js.org/plugins/dll-plugin/

Вы должны добавить внешнюю библиотеку в peerDependencies для своей собственной библиотеки и добавить внешнюю библиотеку в dependencies для своего приложения, затем вы должны исключить внешнюю библиотеку из комплекта вашей библиотеки. используйте собственную библиотеку, используя externals или DllPlugin, и вы достигнете своей цели.

UPD:

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

Также вы можете использовать dynamici c import в вашей библиотеке : check существует внешняя библиотека в текущей среде, а если нет - импортируйте ее.

Но эти два случая не подходят , мы этого не делаем.

Webpack не может разрешить динамический c импорт , а внешняя библиотека все равно будет в комплекте .

NPM команда создана peerDependencies специально для случаи как у вас. Это отраслевой стандарт.

Прочтите, пожалуйста:

1. https://docs.npmjs.com/files/package.json#peerdependencies
2. https://webpack.js.org/guides/author-libraries/#externalize -loda sh
3. https://nodejs.org/es/blog/npm/peer-dependencies/

Не знаю как убедить тебя ...