Сборник рассказов упрощает жизнь всему проекту, разрабатывая и проектируя общий компонент за пределами вашего приложения в изолированной среде.
Сборник рассказов React поможет разработчику создать компонент и поделиться им в нескольких проектах.
Установить сборник рассказов
npx storybook init
Приведенная выше команда внесет следующие изменения в вашу локальную среду:
- 📦 Установите необходимые зависимости.
- 🛠 Настройте необходимые сценарии для запуска и сборки Storybook.
- 🛠 Добавьте конфигурацию сборника рассказов по умолчанию.
- 📝 Добавьте несколько шаблонных историй, чтобы начать.
- 📡 Настройте телеметрию, чтобы помочь нам улучшить Storybook. Об этом подробнее здесь".
npm run storybook / yarn storybook
Затем он запустит веб-сервер на порту 9001, и это будет выглядеть так:
После этого нам нужно поместить наши компоненты (с их разными состояниями) в приведенную выше консоль. Мы делаем это, сочиняя набор историй.
Один STORY должен возвращать элемент REACT. Затем вы взаимодействуете с ним из React Storybook.
В следующем коде мы пишем несколько историй для различных состояний нашего компонента todo list.
import React from 'react'; import MainSection from '../MainSection'; import { storiesOf, action } from '@kadira/storybook'; storiesOf('MainSection', module) .add('all active', () => { const todoItems = [ { id: 'one', text: 'Item One', completed: false }, { id: 'two', text: 'Item Two', completed: false }, ]; return getMainSection(todoItems); }) .add('some completed', () => { const todoItems = [ { id: 'one', text: 'Item One', completed: false }, { id: 'two', text: 'Item Two', completed: true }, ]; return getMainSection(todoItems); }) .add('all completed', () => { const todoItems = [ { id: 'one', text: 'Item One', completed: true }, { id: 'two', text: 'Item Two', completed: true }, ]; return getMainSection(todoItems); }); function getMainSection(todos) { const actions = { clearCompleted: action('clearCompleted'), completeAll: action('completeAll') }; return ( <div className="todoapp"> <MainSection todos={todos} actions={actions} /> </div> ); }
Затем вы можете взаимодействовать с ними внутри React Storybook следующим образом:
Объединение с помощью Rollup
Rollup — хороший инструмент для объединения, если мы хотим упаковать библиотеку компонентов React и повторно использовать ее в других проектах.
Rollup нуждается в точке входа для создания пакета. Мы можем создать файл index.js
в папке src
, который будет служить точкой входа для Rollup.
Добавьте экспорт компонентов в этот index.js
файл, который будет использоваться другими, а также импортируйте global.css / global.scss
файл сюда, чтобы мы могли создать пакет CSS.
Чтобы собрать нашу библиотеку, давайте добавим следующие зависимости разработчика.
npm i -D rollup @rollup/plugin-babel rollup-plugin-peer-deps-external rollup-plugin-scss rollup-plugin-terser @babel/preset-react @rollup/plugin-node-resolve @rollup/plugin-typescript
Давайте разберемся в этих зависимостях:
rollup
предоставляет интерфейс командной строки (CLI) для объединения библиотеки.@rollup/plugin-babel
обеспечивает бесшовную интеграцию между Rollup и существующим Babel.rollup-plugin-peer-deps-external
предотвращает добавление одноранговых зависимостей в пакет, поскольку ожидается, что они будут у потребителя библиотеки. Таким образом, мы также получаем меньший размер пакета.rollup-plugin-scss
объединяет файлы scss.rollup-plugin-terser
уменьшите сгенерированный пакет es.@babel/preset-react
добавляет поддержку JSX.@rollup/plugin-node-resolve
помогает разрешать сторонние модули в случае, если вы используете какие-либо сторонние зависимости. Если вы используете какую-либо стороннюю зависимость, она разрешит их и добавит в исходный код.@rollup/plugin-typescript
транспилирует файлы TypeScript в JavaScript.
Затем мы создаем файл rollup.config.js
и добавляем следующее содержимое.
import { babel } from "@rollup/plugin-babel"; import external from "rollup-plugin-peer-deps-external"; import resolve from "@rollup/plugin-node-resolve"; import scss from "rollup-plugin-scss"; import typescript from "@rollup/plugin-typescript"; import { terser } from "rollup-plugin-terser"; export default [ { input: "./src/index.ts", output: [ { file: "dist/index.js", format: "cjs", }, { file: "dist/index.es.js", format: "es", exports: "named", }, ], plugins: [ scss({ output: true, failOnError: true, outputStyle: "compressed", }), babel({ exclude: "node_modules/**", presets: ["@babel/preset-react"], }), external(), resolve(), typescript(), terser(), ], }, ];
Далее нам нужно обновить package.json. Библиотеки должны распространяться с использованием CommonJS и ES6. Мы указываем пути к выходным файлам, используя свойства main
и module
. Мы также используем эти свойства в файле конфигурации Rollup.
Затем мы добавляем сценарий build
, который использует CLI свертки с флагом -c
. Это означает, что Rollup будет искать файл конфигурации с именем rollup.config.js для объединения библиотеки компонентов.
... "main": "dist/index.js", "module": "dist/index.es.js", ... "scripts": { ... "build": "rollup -c", } ...
Развертывание Storybook в частном/общедоступном пакете NPM
Развертывание сборника рассказов в частном или общедоступном пакете npm помогает повторно использовать сборник рассказов в качестве пакета npm в вашем приложении. Даже вы можете использовать сборник рассказов как пакет npm в нескольких проектах.
Просто посетите репозиторий React Storybook, и вы увидите инструкции по началу работы.
Попробуйте и сообщите нам, как React Storybook работает для вас. Я всегда очень рад видеть ваши отзывы и добавлять новые функции.