Super Quick — это серия небольших, но полезных руководств, которые значительно упрощают жизнь.

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

Начиная

Чтобы поделиться компонентом React, нам нужно его транспилировать. Мы будем использовать Webpack для связывания кода и Babel для компиляции ESx в более удобный, совместимый с браузером javascript.

Установка зависимостей

Создайте новый пустой проект. В этом проекте создайте файл package.json и инициализируйте его {}.

Выполните следующее, чтобы установить основные зависимости.

npm install react webpack

Запустите следующее, чтобы установить зависимости dev.

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-transform-react-jsx @babel/plugin-proposal-object-rest-spread

Когда пользователь попытается установить ваш пакет с помощью npm install <package_name>, эти зависимости не будут установлены в его системе. Всегда будьте любезны и никогда не добавляйте в проект больше зависимостей, чем это абсолютно необходимо. Маленькие пакеты со 100 зависимостями очень раздражают.

Как только это будет сделано, ваш package.json должен выглядеть примерно так:

Все идет нормально. Вы можете узнать больше о других пакетах, которые мы установили, по ссылкам ниже.

@babel/preset-env

@babel/plugin-proposal-object-rest-spread

@babel/plugin-transform-react-jsx

Настройка Package.json

Прежде чем вы сможете опубликовать проект, вам необходимо

  1. Дайте ему имя, описание и версию.
  2. Добавьте сценарии, которые вы будете использовать для запуска и сборки пакета.
  3. Установите точку входа на build/index.js
  4. Добавьте реакцию в качестве одноранговой зависимости. Довольно хорошая статья о зависимостях одноранговых узлов

Используйте приведенную ниже структуру package.json, чтобы заполнить файл package.json для вашего пакета.

Хорошая статья, чтобы узнать больше о package.json

Настройка Webpack и Babel

В этом уроке мы будем использовать Babel 7. Между Babel 6 и Babel 7 есть много критических изменений, поэтому приведенные здесь сценарии не будут работать с Babel 6.

Создайте файл webpack.config.js в основном каталоге. Это файл, который Webpack использует, чтобы понять, как вы хотите его настроить. Мы собираемся сказать Webpack взять файлы из каталога «src», использовать babel для преобразования их в совместимый с браузером javascript и сохранить вывод в каталоге сборки.

Конфигурация веб-пакета

Поскольку мы используем Babel, нам также необходимо настроить его. Добавьте файл .babelrc в корневой каталог. Скопируйте следующее в ваш файл .babelrc

.babelrc

Добавление кода

Теперь, когда мы настроили проект, создайте каталог «src» и поместите свой компонент в файл index.js. Эта часть в основном зависит от вас.

Объединяя все это

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

Теперь, когда у вас настроен проект и добавлен компонент, давайте проверим пакет, чтобы убедиться, что все настроено правильно.

Запустите npm start, и веб-пакет должен собрать ваш код и поместить его в каталог build/. Файл build/index.js должен быть минимизирован, код javascript.

Теперь вы можете создать свой код, запустив npm run build. После успешной сборки используйте npm link, чтобы локально связать код и сделать его доступным для проектов, работающих в вашей локальной системе. Теперь вы можете импортировать свой пакет в свои проекты, используя имя, которое вы ему дали.

Публикация вашего пакета

Публикация проекта довольно проста, если вы публикуете проект публично. Зарегистрируйте аккаунт на https://www.npmjs.com. После этого запустите npm login, чтобы войти в свою учетную запись. Как только вы убедитесь, что ваш компонент работает, запустите npm publish, чтобы опубликовать ваш компонент в NPM. Этот проект теперь доступен для публичного использования.

Плавник.

Если вы делитесь публично, вы можете использовать общедоступную учетную запись NPM для размещения своего проекта. Если вы хотите поделиться конфиденциально, есть множество вариантов, включая NPM, MyGet, Npm-register и т. д.

Если у вас есть вопросы, напишите мне в комментариях ниже.