Мы будем создавать нашу собственную библиотеку компонентов в React. Затем мы опубликуем их в NPM, чтобы они были доступны для всех.
Вот несколько библиотек, которые мы собираемся использовать.
- Lerna: для публикации модулей npm
- Storybook и его дополнения для независимой разработки компонентов
- шутка для тестирования
Настроить проект
git clone https://github.com/ankur-kushwaha/react-component-library.git cd react-component-library yarn //after the installation complete yarn storybook
- Это запустит сервер на порту 9001. Вот пользовательский интерфейс.
- Я добавил компонент под названием
Button
, который использует одну опору для обновления цвета фона кнопки. Сходство можно добавить несколько компонентов и свойств.
3. Вы также можете протестировать свой компонент, изменив входные аргументы в правом поле. Введите green
и посмотрите изменения.
Структура папки
- Папка пакетов будет содержать все компоненты.
- Все компоненты должны быть собраны сами по себе. Как будто у них должен быть package.json для поддержки своей версии.
- В файле Package.json должно быть установлено свойство
main
, указывающее точку входа. - Всегда лучше скомпилировать исходный код es6 в es5 с помощью babel.
- Вся эта оптимизация выполняется в компоненте Button.
Улучшение сборника рассказов с помощью надстроек
- 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
Он проверит, какой компонент был изменен, а затем
- укажите версию.
- Введите
y
и нажмите Enter. - Пакеты опубликованы в реестре npm.
В случае:
- Вы получаете сообщение об ошибке
you are not authorized to publish
. Это означает, что имя пакета уже занято. - Если вы используете
@something/button
, это означает, что пакет ограничен. Для этого требуется доступ к частной учетной записи реестра в npm. - Если вы хотите настроить свою собственную частную регистрацию 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