Создайте пакет 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 здесь.
Надеюсь, эта статья будет полезна вам и вашим будущим проектам.