Создание и публикация библиотеки компонентов React может стать ценным вкладом в сообщество разработчиков. В этой статье блога мы рассмотрим несколько методов вместе с примерами кода, которые помогут вам начать это увлекательное путешествие. Давайте погрузимся!

Метод 1. Ручная настройка

Шаг 1. Создайте новый проект React:

npx create-react-app my-component-library

Шаг 2. Создайте компоненты.
Создайте компоненты в каталоге srcвашего проекта.

Шаг 3. Экспортируйте компоненты:
Экспортируйте каждый компонент из центрального файла index.js:

export { default as Button } from './Button';
export { default as Input } from './Input';
// ...

Шаг 4. Настройте файл package.json:
Добавьте следующие поля в файл package.json:

{
  "name": "my-component-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "files": [
    "dist",
    "src"
  ],
  "scripts": {
    "build": "babel src --out-dir dist"
  },
  "peerDependencies": {
    "react": "^16.8.0",
    "react-dom": "^16.8.0"
  }
}

Шаг 5. Создайте и опубликуйте свою библиотеку:

npm run build
npm publish

Метод 2: использование библиотеки Create React

Шаг 1. Установите глобальную библиотеку Create React:

npm install -g create-react-library

Шаг 2. Создайте свою библиотеку:

create-react-library my-component-library

Шаг 3. Создайте и опубликуйте свою библиотеку:

cd my-component-library
npm run build
npm publish

Метод 3: использование объединения

Шаг 1. Создайте новый проект:

mkdir my-component-library
cd my-component-library
npm init -y

Шаг 2. Установите необходимые зависимости:

npm install react react-dom rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs rollup-plugin-babel rollup-plugin-terser rollup-plugin-peer-deps-external --save-dev

Шаг 3. Создайте необходимые файлы конфигурации:
Создайте rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import { terser } from 'rollup-plugin-terser';
export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/index.es.js',
      format: 'es',
      sourcemap: true,
    },
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/',
      presets: ['@babel/preset-react'],
    }),
    terser(),
  ],
  external: ['react', 'react-dom'],
};

Шаг 4. Создайте и опубликуйте свою библиотеку:

npm run build
npm publish

В этой статье мы рассмотрели три различных метода создания и публикации библиотеки компонентов React. Независимо от того, выбираете ли вы ручную настройку, создание библиотеки React или объединение, каждый метод предлагает свои преимущества и гибкость. Начните делиться своими повторно используемыми компонентами со всем миром и внесите свой вклад в процветающую экосистему React!