Здравствуйте, меня зовут Мартинс Джозеф, и это мой первый пост на Medium, так что, пожалуйста, терпите меня.

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

ПОЧЕМУ Я СОЗДАЛ ДАННЫЙ ПАКЕТ NPM

Этот пакет был создан как внутренняя реализация проблемы, которая возникла у StockFare.
Итак, мы создавали мобильное приложение с использованием response-native, и нам нужно было реализовать FlutterWave’s Rave для обработки платежей от наших клиентов. На момент написания начальной версии этого плагина официальный плагин Rave для react-native не поддерживал RN v0.60 (что мы использовали во время начальной разработки StockFare's мобильное приложение) и выше. Мы продолжали сталкиваться с разными проблемами, и, поскольку у нас было мало времени и мы не могли начать писать исправления для плагина, мы решили перейти на версию плагина для просмотра в Интернете.
Мы также не хотели тратить зря время настройки любого плагина, поддерживающего реакцию, для работы с iOS и Android, а также у нас были проблемы с тем фактом, что на момент написания этой статьи в качестве способа оплаты поддерживались только карты, банк и мобильные деньги, в то время как веб-версия Rave поддерживала гораздо больше способы оплаты, к которым у нас не было бы доступа, если бы не было возможности связать веб-сайт Rave с нашим мобильным приложением.
Мы нашли только один плагин здесь, который предлагал такие возможности, хотя этот плагин собирался решить нашу проблему, он не давали нашим пользователям возможность отменить транзакцию на тот случай, если на загрузку веб-сайта Rave в веб-представление потребовалось много времени. Кроме того, расположение и цвет загрузчика сделали переход на веб-сайт Rave очень очевидным, и нам нужно было нечто большее, чем транзакционная ссылка, которая была единственным значением, возвращаемым этим плагином. Мы не могли отредактировать и сделать запрос на перенос, потому что это могло сломать код людей, если по какой-либо причине они запускали обновление npm.
Нашим единственным решением было написать что-то, что сделало бы переход на веб-сайт Rave менее очевидным, а также вернул больше, чем просто транзакционную ссылку, и родился @ creativejoe007 / react-native-rave-webview.

Как я загрузил React-Native-Rave-Webview в NPM

Прежде всего (введение !!), @ creativejoe007 / react-native-rave-webview - это простая в использовании оболочка веб-представления для Rave (платежный шлюз), которая дает вы получаете доступ ко всем способам оплаты, поддерживаемым Rave, и передаете ответ с сервера Rave обратно вашему мобильному приложению (через onSuccess props event), чтобы вы могли возьмите на себя управление оттуда, используя любые данные, которые вам нужны.
Теперь о процессе:
1. Создал общедоступный репозиторий Github, который вы можете найти здесь (https://github.com/creativeJoe007/react -native-rave-webview ).

2. Клонировал репозиторий git в мою локальную систему, затем я запустил «npm login» в моем каталоге проекта, а затем ввел данные в поля, запрошенные npm.

3. Затем я выполнил «npm init», который используется для инициализации npm в каталог вашего проекта (будет задан ряд вопросов, на которые вы сможете ответить на ваши собственные, поскольку они относятся к деталям вашего пакета).

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

5. Запустите «npm publish», чтобы опубликовать в npm (это не сработает, если на npm с тем же именем или если npm обнаруживает, что это имя слишком похоже на другой пакет).

6. Пример сообщения об ошибке, которое вы увидите, если бы имя другого пакета было похоже на ваше (403 Запрещено - PUT https://registry.npmjs.org/react-native-ravewebview - слишком похожее имя пакета в существующие пакеты) или (У вас нет разрешения на публикацию «‹ имя вашего пакета ›». Вы вошли в систему как правильный пользователь?).

7. Чтобы решить эту проблему, измените свойство name в вашем package.json. и повторно запустите команду 5. Или вы можете выполнить поиск по имени с помощью «npm search», чтобы узнать, существует ли это имя уже.

8. Если по-прежнему не удается опубликовать, то хорошим вариантом будет добавить область, используя свое имя пользователя. Что-то вроде «@ имя-пользователя / имя-пакета», а затем выполните команду «npm init - scope = username» команда. Это приведет к появлению поля, аналогичного тому, что вы видели в команде 3, но с другими данными, кроме заполняемого имени.

9. Если вы использовали команду 8, вам нужно было бы сделать свою область общедоступной, запустив «(npm publish - access public) »

10. Дополнительную информацию можно найти на странице (https://zellwk.com/blog/publish-to-npm/).

Спасибо за прочтение и не забудьте поставить лайк и поделиться этой статьей. Я гарантирую, что буду публиковать больше контента по мере продолжения этого приключения.

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