Мы будем создавать нашу собственную библиотеку компонентов в React. Затем мы опубликуем их в NPM, чтобы они были доступны для всех.

Вот несколько библиотек, которые мы собираемся использовать.

  1. Lerna: для публикации модулей npm
  2. Storybook и его дополнения для независимой разработки компонентов
  3. шутка для тестирования

Настроить проект

git clone https://github.com/ankur-kushwaha/react-component-library.git
cd react-component-library
yarn
//after the installation complete
yarn storybook
  1. Это запустит сервер на порту 9001. Вот пользовательский интерфейс.
  2. Я добавил компонент под названием Button, который использует одну опору для обновления цвета фона кнопки. Сходство можно добавить несколько компонентов и свойств.

3. Вы также можете протестировать свой компонент, изменив входные аргументы в правом поле. Введите green и посмотрите изменения.

Структура папки

  1. Папка пакетов будет содержать все компоненты.
  2. Все компоненты должны быть собраны сами по себе. Как будто у них должен быть package.json для поддержки своей версии.
  3. В файле Package.json должно быть установлено свойство main, указывающее точку входа.
  4. Всегда лучше скомпилировать исходный код es6 в es5 с помощью babel.
  5. Вся эта оптимизация выполняется в компоненте Button.

Улучшение сборника рассказов с помощью надстроек

  1. addon-knobs: Storybook Addon Knobs позволяют динамически редактировать свойства React с помощью пользовательского интерфейса Storybook. Вы также можете использовать ручки как динамическую переменную внутри историй в Storybook.

2. addon-storyshots: StoryShots добавляет автоматическое тестирование снимков Jest для Storybook.

3. addon-info: Надстройка Storybook Info покажет дополнительную информацию для ваших историй в Storybook. Полезно, если вы хотите отобразить вместе с историей документацию по использованию или другие типы документации.

4. addon-options: Дополнение Options можно использовать для настройки пользовательского интерфейса Storybook.

Компоненты публикации

Итак, мы завершили шаги по созданию независимых компонентов. Пришло время их опубликовать. Здесь мы будем использовать lerna. Лерна может определить компоненты, которые были изменены, и предложить вам обновить версию в их package.json перед их публикацией.

Вы можете поддерживать разные версии для каждого компонента.

Перед публикацией выполните приведенную ниже команду, чтобы войти в npm.

npm login

Вы должны сначала создать учетную запись на npm, и ваши учетные данные npm здесь

//first commit your changes in git repo
git remote add origin <your git repo>
git commit -am "done"
git push
//setup lerna for new components
lerna bootstrap
lerna publish

Он проверит, какой компонент был изменен, а затем

  1. укажите версию.
  2. Введите y и нажмите Enter.
  3. Пакеты опубликованы в реестре npm.

В случае:

  1. Вы получаете сообщение об ошибке you are not authorized to publish. Это означает, что имя пакета уже занято.
  2. Если вы используете @something/button, это означает, что пакет ограничен. Для этого требуется доступ к частной учетной записи реестра в npm.
  3. Если вы хотите настроить свою собственную частную регистрацию NPM. Вы можете настроить синопию на своем компьютере
npm install -g sinopia
// then run the sinopia and it will start the npm private server
sinopia
// if you want to handle sinopia crashes automatically. You can use // pm2 to manage that
npm install -g pm2
pm2 pm2 start "C:\Users\<user>\AppData\Roaming\npm\node_modules\sinopia\bin\sinopia"

использованная литература

Лерна: https://lernajs.io/
Сборник рассказов: https://storybook.js.org/
PM2: https://github.com/Unitech/pm2 < br /> Sinopia: https://github.com/rlidwka/sinopia