Это всегда удобно при работе над несколькими проектами.

Есть ли у вас один набор компонентов, которые красиво спроектированы, настолько совершенны, что вы копируете их из одного проекта в другой? Вы мечтаете использовать npm install, чтобы вставить его в свое следующее приложение, вместо того, чтобы копировать / вставлять его? Если да, то вы попали в нужное место!

Сегодня вы узнаете, как создать собственную библиотеку компонентов React и опубликовать ее в новом реестре пакетов GitHub!

Вы будете использовать следующие интересные вещи:

  • TypeScript: Надеюсь, нет необходимости вводить это слово!
  • Rollup.js: сборщик модуля Javascript для компиляции нашего кода,
  • Create-react-app: простой способ создать простое приложение React, которое мы собираемся использовать в качестве игровой площадки для тестирования ваших компонентов,
  • Npm-run-all: инструмент командной строки для параллельного запуска нескольких npm-скриптов,
  • Реестр пакетов GitHub: служба управления пакетами GitHub, которая позволяет легко публиковать общедоступные или частные пакеты рядом с вашим исходным кодом.

Как обычно с моими работами, весь код можно найти на моем GitHub.

Время - деньги, приступим!

Пакет package.json

В выбранном вами каталоге создайте новый package.json файл и установите первый devDependencies, который нам понадобится.

$ npm init -y
$ npm i -D @types/react @types/react-dom @types/styled-components typescript

Файл tsconfig.json

Как я уже сказал, мы собираемся использовать TypeScript, поэтому нашему проекту требуется TypeScript Config.

Чтобы сгенерировать его, убедитесь, что у вас глобально установлен TypeScript в вашей среде, запустив $ npm i -g typescript Затем просто запустите$ tsc --init.

Эта команда генерирует файл json, в котором мы собираемся изменить кучу вещей:

  • Раскомментируйте ключ jsx и измените его значение на react.
  • Установите module на ESNext
  • Раскомментируйте outDir и установите ./dist
  • Раскомментировать declaration
  • Раскомментировать moduleResolution
  • Ниже compilerOptions добавьте "include":["src/**/*"].

Ваш tsconfig.json файл должен выглядеть так:

Создайте первый компонент нашей библиотеки

Все компоненты нашей библиотеки будут в папке ./src.

Структура будет выглядеть так:

-- src/
   |-- my-component/
       |-- index.tsx 
   |-- index.ts

index.ts будет нашим основным файлом, экспортирующим все компоненты, которые мы создадим. Пока мы об этом говорим, самое время создать наш первый компонент React!

Внутри my-component/index.tsx напишите простой компонент React.

Вот пример:

import React from 'react';
import styled from 'styled-components';

const StyledMyComponent = styled.div<{ color?: string }>`
  color: ${p => p.color || 'pink'};
`;

interface MyComponentProps {
  text: string;
  color?: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ text, color }) => (
  <StyledMyComponent color={color}>{text}</StyledMyComponent>
);

export { MyComponentProps, MyComponent };

Не самый полезный компонент, но он нужен только для тестирования.

Экспортируйте этот компонент из index.ts папки ./src:

import { MyComponent } from './my-component';

export { MyComponent };

Используйте Rollup.js для создания нашей библиотеки

Отлично - мы создали фантастический компонент React!

Теперь, чтобы создать нашу библиотеку, нам нужно сделать три вещи:

  • Требуется установка devDependencies
  • Создайте конфигурацию Rollup,
  • Добавьте новые скрипты в package.json.

Сначала займемся devDependencies. Нам нужно:

  • Rollup: наш сборщик модулей,
  • Rollup-plugin-delete: плагин, который будет убирать мусор между сборками (очищать папку ./dist),
  • Rollup-plugin-typescript2: подключаемый модуль Rollup для TypeScript,
$ npm i -D rollup rollup-plugin-delete rollup-plugin-typescript2

Затем создайте файл rollup.config.js в корневой папке. Должно получиться так:

import typescript from 'rollup-plugin-typescript2';
import del from 'rollup-plugin-delete';
import pkg from './package.json';

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: 'playground/src/component-lib/index.js',
        format: 'esm',
        banner: '/* eslint-disable */',
      },
      { file: pkg.main, format: 'cjs' },
      { file: pkg.module, format: 'esm' },
    ],
    plugins: [
      del({ targets: ['dist/*', 'playground/src/component-lib'] }),
      typescript(),
    ],
    external: Object.keys(pkg.peerDependencies || {}),
  },
];

Что мы просим Rollup сделать:

  • Возьмите src/index.ts в качестве входа
  • Выведите копию сгенерированной библиотеки на нашу игровую площадку (мы создадим ее на следующем шаге) и одну копию в папку ./dist с двумя форматами: формат EsModules (esm) и формат CommonJS (cjs). Наш package.json должен знать о них, поэтому давайте изменим его:
{
  ...
    "main": "dist/index.cjs.js",
    "module": "dist/index.esm.js",
  ...
}
  • Мы используем два плагина, TypeScript и Del . Мы предоставляем Del два каталога для очистки после каждой сборки,
  • Ключ external сообщает Rollup о зависимостях, которые мы не хотим связывать с нашим проектом. Они из нашего package.json, так что давайте запишем их туда:
{
  ...
    "peerDependencies": {
      "react": "^16.10.2",
      "react-dom": "^16.10.2",
      "styled-components": "^4.4.0"
    },
  ...
}

Мы почти закончили с Rollup! Последнее, что нам нужно сделать, это добавить два скрипта в наш package.json:

{
  ...
    "scripts": {
      "build": "rollup -c",
      "build-watch": "rollup -c -w",
    },
  ...
}

Добавить площадку для тестирования в наш проект

Было бы здорово иметь место, где мы можем играть с нашими компонентами? Create-react-app идеально подходит для этого.

Глобально установите копию CRA в своей среде и создайте playground в корне вашего проекта.

Если вы планируете создавать компоненты с помощью библиотеки styled-components, не забудьте установить ее копию в зависимостях игровой площадки:

$ npm i -g create-react-app
$ create-react-app playground --typescript
$ cd playground && npm i styled-components

Добавьте эти три сценария, чтобы все работало вместе:

{
  ...
    "scripts": {
      "build": "rollup -c",
      "build-watch": "rollup -c -w",
      "start-playground": "cd playground && npm run start",
      "i-all": "npm i && cd playground && npm i",
      "dev": "npm-run-all --parallel build-watch start-playground"
    },
  ...
}

ПРИМЕЧАНИЕ. Мы используем npm-run-all для одновременного запуска нескольких процессов, не забудьте установить его как devDependencies:

$ npm i -D npm-run-all

Хороший! После установки node_modules с $ npm run i-all вы сможете запустить $ npm run dev.

Это создаст нашу библиотеку, будет следить за изменениями и запускать приложение Playground по адресу http://localhost:3000.

Внутри исходной папки нашей игровой площадки (playground/src) вы должны найти копию нашей библиотеки в папке ./component-lib.

Опубликуйте нашу библиотеку в реестре пакетов GitHub

Поздравляем с созданием собственной библиотеки компонентов!

Последний шаг этого руководства - научить вас публиковать свою библиотеку в Реестре пакетов GitHub.

Перед публикацией нашей библиотеки нам нужно сделать несколько вещей сpackage.json

Переименуйте пакет

Пока на вашем package.json должно быть имя вашей папки. Чтобы опубликовать свой пакет, вам необходимо переименовать его следующим образом:
@<github_name>/<repo>. В моем случае это выглядит так:

{
  ...
  "name": "@thmsgbrt/my-react-component-library",
  ...
}

Что мы хотим опубликовать?

Конечно, мы хотим включить нашу сгенерированную библиотеку, которую можно найти в папке ./dist.

{
  ...
  "files": "dist",
  ...
}

Где мы можем найти наш файл определения типов?

{
  ...
  "typings": "dist/index.d.ts",
  ...
}

Где мы публикуем наш пакет?

{
  ...
  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  },
  ...
}

Мы должны быть готовы к публикации сейчас.

Давайте запустим $ npm publish.

Если вы никогда раньше не публиковали в репозитории пакетов GitHub, у вас, вероятно, будет ошибка ...

Войдите в GitHub, затем опубликуйте свой пакет (клянусь)

Во-первых, вам нужно будет сгенерировать токен. Перейдите в настройки разработчика GitHub на вкладке токенов личного доступа (щелкните здесь, если вы ленивы) и нажмите Создать новый токен.

Минимальные области действия, которые вам понадобятся, - это write:packages и read:packages (которые также будут проверять объем репо).

Если щелкнуть Создать токен внизу страницы, будет создан токен. Скопируйте это!

Вернувшись в терминал, выполните следующую команду:

$ npm login --registry=https://npm.pkg.github.com

Вам будет предложено ввести ваше имя пользователя GitHub, адрес электронной почты и пароль.

Используйте токен в качестве пароля, и вы должны войти в систему!

Под капотом он добавит новую запись в .npmrc файл вашей среды, которая выглядит следующим образом:

//npm.pkg.github.com/:_authToken=<YOUR_TOKEN>

Попробуйте запустить $ npm publish сейчас, и все должно получиться!

Ваш пакет теперь виден на Github.

https://github.com/<name>/<repo>/packages

Установите пакет в свой проект

Это отличный Томас, но как мне установить его в свой проект?

Хороший вопрос! Ответ прост. \

Создайте файл .npmrc в том же каталоге, что и package.json вашего проекта.

Заполните его ссылкой на реестр GitHub с вашим именем GitHub.

registry=https://npm.pkg.github.com/<github_name>

Вот и все!

Теперь попробуйте запустить команду установки:

$ npm install @<github_name>/<package>

Вы дошли до конца этого урока! Поздравляю!

Надеюсь, вы кое-чему научились, я многому научился на этом!

Хотите увидеть готовый проект? Вот ваша ссылка: GitHub.

Эта статья оказалась полезной? Следуйте за мной (Thomas Guibert) на Medium и ознакомьтесь с моими самыми популярными статьями ниже! Пожалуйста, поделитесь этой статьей!