Создайте пакет NPM для React.js

Вступление

В этом руководстве мы создадим пакет NPM для React с помощью create-react-app, а затем настроим CI / CD с помощью Travis и Heroku.

Создадим самый простой пакет: Hello World. Эта статья предназначена не столько для того, чтобы показать вам, как писать код для вашего пакета, сколько для демонстрации того, как опубликовать ваш пакет NPM, написать тесты и настроить CI / CD.

Запуск проекта

Во-первых, нам нужно создать проект с помощью create-react-app. Это лучший способ запускать приложения, основанные на библиотеке React. Согласно документации, под капотом create-react-app используются Webpack, Babel, EsLint и другие проекты. Вам не нужно изучать и настраивать множество инструментов для сборки. Вы можете создать собственное приложение React, используя всего одну команду, но если вам нужна расширенная конфигурация, вы можете eject из Create React App и напрямую редактировать их файлы конфигурации.

Перед созданием пакета откроем терминал и перейдем в папку, в которой мы будем хранить проект. Затем создадим наш пакет NPM:

npx create-react-app react-salute
cd react-salute
npm start

Теперь мы можем открыть http: // localhost: 3000 /, чтобы увидеть наше приложение.

Выполнение этих команд создает приложение React с именем react-salute. Здесь будет сгенерирована исходная структура проекта и установлены транзитивные зависимости:

react-salute
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

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

Создание библиотеки

Мы используем папку src в качестве основной папки в нашем пакете. Здесь мы храним наш исходный код, примеры и тесты.

Во-первых, давайте создадим папку src/lib и поместим в нее index.js file с таким содержанием:

Несмотря на наличие папок examples и __tests__, для загрузки в NPM будет использоваться папка lib.

Отличная работа! Мы создали компонент, который сообщает нам Salute React!, где мы можем изменить React слово, передав компоненту параметр name. Этот код будет скомпилирован и опубликован в NPM.

Далее нам нужно несколько способов проверить наш компонент локально. Для этого мы создаем папку /src/examples и файл index.js со следующим содержимым:

Все просто - импортируем нашу библиотеку и создаем два примера ее использования.

Теперь, чтобы все заработало, исправим /src/index.js файл:

Чтобы увидеть результат, запустим npm start и зайдем по адресу http: // localhost: 3000 / в нашем браузере.

Работает. Большой!

Мы можем удалить App.css, App.js, App.test.js, index.css, logo.svg, serviceWorker.js из каталога /src.

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

Тестирование

В этой главе мы будем следовать документации по тестированию create-react-app.

Для тестирования нашего пакета воспользуемся Jest + Enzyme.

Enzyme поддерживает полный рендеринг с mount(), и вы также можете использовать его для тестирования изменений состояния и жизненного цикла компонентов.

Установим enzyme:

npm install --save-dev enzyme enzyme-adapter-react-16

Начиная с Enzyme 3, вам нужно будет установить Enzyme вместе с адаптером, соответствующим используемой вами версии React.

Приложение Create React использует Jest в качестве средства запуска тестов, поэтому оно уже установлено d.

Адаптер также необходимо настроить в нашем глобальном установочном файле. Для этого мы создаем файл src/setupTests.js со следующим кодом:

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

  • Файлы с суффиксом .js в __tests__ папках.
  • Файлы с суффиксом .test.js.
  • Файлы с суффиксом .spec.js.

Файлы .test.js / .spec.js (или __tests__ папки) могут находиться на любой глубине в папке src верхнего уровня.

Теперь мы можем писать наши тесты. Поместите index.js файл в папкуsrc/__tests__ со следующим содержимым:

Мы создали три тестовых случая. В первом случае проверяется сообщение по умолчанию Salute React!. Второй проверяет сообщение с переданным name. Последний проверяет изменение параметра name.

Наши тесты готовы, давайте их запустим:

npm test

В консоли мы должны увидеть что-то вроде этого:

PASS  src/__tests__/index.js
  <ReactSalute />
    ✓ Check default message (7ms)
    ✓ Check message passed through props (1ms)
    ✓ Check reset props (32ms)
Test Suites: 1 passed, 1 total
Tests:       3 passed, 3 total
Snapshots:   0 total
Time:        2.598s
Ran all test suites.
Watch Usage: Press w to show more.

Испытания прошли, можно двигаться дальше.

Издательский

Первое, что нам нужно сделать, это подготовить наш пакет NPM или, если быть более конкретным, скомпилировать его. Для этого мы устанавливаем babel-cli, чтобы мы могли скомпилировать наш проект с помощью интерфейса командной строки:

npm install --save-dev @babel/cli

Поскольку мы используем create-react-app, все остальные зависимости для babel уже установлены - нам не нужно о них беспокоиться.

Теперь нам нужно указать babel, как правильно обрабатывать наш код. Для этого мы используем presets. Давайте создадим .babelrc файл со следующим содержанием:

{ "presets": ["react-app"] }

Как видите, мы указали только один пресет: react-app. Это требуется при разработке приложений реагирования.

Чтобы мы могли опубликовать наш пакет с любой платформы, нам нужно установить cross-env:

npm install --save-dev cross-env

Затем мы добавляем следующую команду в раздел scripts в package.json:

"scripts": {
  ...
  "prepublishOnly": "cross-env NODE_ENV=production babel src/lib --out-dir dist"
},

prepublishOnly - запускать до подготовки и упаковки пакета, только на npm publish. В нашем случае мы указали, что babel скомпилирует код в папку dist, которая будет отправлена ​​в NPM.

Давайте настроим наш package.json:

"name": "react-salute",
"version": "0.0.1",
"main": "./dist/index.js",
"keywords": [
  "react",
  "salute",
  "react-salute",
  "hello",
  "world",
  "prop-types"
],
"repository": {
  "type": "git",
  "url": "https://github.com/fedoryakubovich/react-salute"
},
"author": {
  "name": "Fedor Yakubovich",
  "url": "https://github.com/fedoryakubovich"
},
"bugs": {
  "url": "https://github.com/fedoryakubovich/react-salute/issues"
},
"files": [
  "dist/index.js",
  "README.md",
  "LICENSE",
  "package.json"
],
"license": "MIT"
...

Давайте разберемся, как это работает:

  • name - название нашего пакета. Обязательное поле при публикации на npm. В нашем случае это react-salute.
  • version - версия нашего пакета. Обязательное поле при публикации на npm. Каждый раз, когда мы публикуем наш пакет, версия должна отличаться от предыдущей, иначе будет ошибка.
  • main - главное поле - это идентификатор модуля, который является основной точкой входа в вашу программу. В нашем случае это /dist/index.js.
  • keywords - массив строк, позволяющих людям обнаружить ваш пакет в том виде, в котором он указан в npm search.
  • repository - ссылка на исходный код.
  • author - ссылка на профиль автора.
  • bugs - URL-адрес системы отслеживания проблем вашего проекта и / или адрес электронной почты, на который следует сообщать о проблемах.
  • files - некоторые специальные файлы и каталоги также включаются или исключаются независимо от того, существуют ли они в массиве files.
  • license - лицензия на пакет.

Мы должны удалить private: true из package.json. В противном случае NPM откажется его опубликовать.

Вы можете увидеть расширенные настройки package.json по доступной ниже ссылке: https://docs.npmjs.com/files/package.json.

Затем нам нужно опубликовать наш пакет в NPM. Мы должны быть зарегистрированы на сайте https://www.npmjs.com/. Итак, если вы еще не зарегистрировались - давайте!

После регистрации введите следующую команду и введите данные своей учетной записи, когда вас попросят:

npm login

Эта команда сообщает установленному на вашем компьютере npm, кто вы и от имени кого вы публикуете свой пакет.

Наконец, мы публикуем наш пакет, выполнив следующую команду:

npm publish

Замечательно, мы опубликовали наш пакет!

Настройка Travis CI

В этой главе мы не останавливаемся на объяснении непрерывной интеграции. Если вы не знакомы с этой концепцией, и в частности с Travis CI, прочтите Основные концепции здесь. Это не займет у вас много времени.

Во-первых, мы должны зарегистрироваться на https://travis-ci.com/. Все, что нам нужно сделать, это привязать нашу учетную запись GitHub к Travis CI.

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

После регистрации нам нужно добавить файл конфигурации Travis в корень нашего проекта. Давайте создадим .travis.yml файл со следующим содержанием:

Здесь мы описали, какая среда Travis должна использоваться в нашем проекте и какую команду запускать. Команда npm test указана в package.json - если бы мы хотели использовать другую команду для тестирования, нам пришлось бы изменить наш .travis.yml.

Затем нам нужно отправить наши изменения на GitHub, который должен запустить задачу в нашем Travis. Если он не запускается, мы можем перейти на нашу Панель управления, найти репозиторий react-salute и выбрать запустить сборку из раскрывающегося списка справа.

После сборки мы должны увидеть что-то вроде этого:

Это означает, что наши тесты прошли. Мы можем перейти к последней главе!

Настройка Heroku

Heroku - это облачная платформа, которая помогает создавать, доставлять, отслеживать и масштабировать приложения. Они говорят: Мы - самый быстрый способ перейти от идеи к URL. Мы будем использовать Heroku в качестве бесплатного хостинга для наших примеров.

Во-первых, нам нужно зарегистрироваться на Heroku. Сделать это можно по ссылке https://signup.heroku.com/. Затем создаем проект. Чтобы создать его, нам нужно перейти в Личный кабинет и нажать New->Create new app. Затем нам нужно ввести имя проекта - в нашем случае response-salute, и выбрать регион, где будет расположен сервер с нашим приложением - в нашем случае Europe.

После отправки кнопки Создать приложение мы будем перенаправлены на страницу настроек развертывания проекта. В настройке Метод развертывания выберите GitHub.

В настройке Connected to GitHub нам предоставляется возможность выбрать проект, с которым нужно связать наш проект Heroku. Выбираемreact-salute.

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

Также давайте установим флажок Подождать, пока CI пройдет перед развертыванием. Это означает, что Heroku будет ждать успешной работы Travis CI.

Наконец, отметим Включить автоматическое развертывание.

Теперь мы переходим с вкладки D eploy на вкладку Настройки.

В конфигурации пакетов сборки нажмите кнопку Добавить пакет сборки. В открывшемся модальном окне в поле URL-адрес Buildpack введите следующий адрес: https://github.com/mars/create-react-app-buildpack.

Сохраняем наши изменения.

create-react-app-buildpack - это buildpack heroku, который развертывает веб-приложения React.js, созданные с помощью create-react-app. Пакет сборки автоматизирует развертывание с помощью встроенного сборщика и обслуживает его через Nginx.

После того, как мы настроили Heroku, мы заходим в нашу учетную запись Github и объединяем нашу рабочую ветку (разработку) с master. После слияния Travis CI запустит и проведет наши тесты. После успешного прохождения тестов Heroku начнет сборку. После успешного завершения сборки мы можем наслаждаться результатом. Мы можем увидеть URL-адрес нашего пакета на вкладке Настройки в настройке Домены и сертификаты.

Откроем https://react-salute.herokuapp.com/.

В этом руководстве мы создали простейший пакет NPM, написали для него тесты и настроили Travis CI и Heroku для непрерывной доставки.

Используйте эту информацию как основу для создания более сложных и полезных пакетов NPM и бесплатного размещения их живых примеров.

Посмотрите репозиторий GitHub здесь.

Надеюсь, эта статья будет полезна вам и вашим будущим проектам.