Блог

Я создаю свою собственную библиотеку компонентов React. Используется package.json react и react-dom как одноранговые зависимости, потому что я хочу отправлять код только для компонентов. Затем этот пакет будет использоваться в других проектах на основе React, поэтому я сам предоставлю React в этих проектах.

Я решил добавить StorybookJS в пакет по двум причинам

1. Помощь во время разработки для предварительного просмотра моих компонентов
2. Создайте статический сайт сборника рассказов, который я буду размещать где-нибудь, демонстрируя компоненты

Структура моего проекта:

 package.json
src/
  components/ // contains components
  storybook/ // <-- not part of the package
  index.ts  // <-- this is entry point of the package
 

Однако это создает проблему. Поскольку StorybookJS требует react и react-dom для запуска, мне пришлось бы включить их в качестве зависимостей библиотеки.

Я буду использовать webpack для фактического объединения только кода компонента, чтобы его можно было распространять. Должен ли я просто использовать externals свойство в конфигурации для исключения react и react-dom из пакета? Я думаю, это сработало бы, но тогда package.json все равно будет отображаться React как его зависимости (чего я не хочу).

Каков правильный подход здесь?

В итоге я поставил react «и react-dom peerDependencies «, поскольку, на мой взгляд, это правильный подход. Поскольку этот файл пакета принадлежит самой библиотеке (а не сборнику рассказов), в нем должны быть правильно указаны его зависимости.

Чтобы избежать объединения React в мой пакет библиотеки, я поместил его в externals конфигурацию webpack следующим образом:

   externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },

 

Таким образом, React или ReactDOM не попадают в комплект. Библиотека является библиотекой компонентов React, поэтому ее в любом случае нельзя использовать без React, и вы должны ее предоставить.

Последний шаг, чтобы заставить Storybook работать, я добавил prepare скрипт, который устанавливает одноранговые зависимости при установке пакета. Таким образом, React и ReactDOM предоставляются для приложения Storybook.

Это сценарий подготовки в моем package.json :

 "scripts": {
  "prepare": "install-peers amp;amp; npm run build"
}
 

Я использовал install-peers package для установки React и ReactDOM. Для более новой версии NPM-клиента этот пакет вам не понадобится, и при запуске npm install также должны быть установлены одноранговые зависимости.