Здравствуйте, меня зовут Мартинс Джозеф, и это мой первый пост на Medium, так что, пожалуйста, потерпите меня.
Сегодня я хотел бы поделиться с вами тем, как я написал свой первый пакет NPM и что вдохновило меня на его написание, а также предоставить вам ссылки, которые я использовал, чтобы провести меня через процесс загрузки.
ПОЧЕМУ Я СОЗДАЛ ЭТОТ ПАКЕТ NPM
Этот пакет был создан как внутренняя реализация проблемы, с которой мы столкнулись в StockFare.
Итак, мы создавали наше мобильное приложение, используя react-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), чтобы вы могли взять на себя процесс оттуда, используя любые данные, которые вам нужны.
Теперь о процессе:
1. Создал общедоступный репозиторий Github, который вы можете найти здесь (https://github.com/creativeJoe007/react -родной-рейв-веб-просмотр).
2. Скопировал мой репозиторий git в свою локальную систему, затем я запустил «npm login» в своем каталоге проекта, а затем ввел данные в поля, запрашиваемые npm.
3. Затем я выполнил «npm init», который используется для инициализации npm в каталоге вашего проекта (будет задан ряд вопросов, вы сможете ответить на них на ваши собственные, поскольку они относятся к деталям вашего пакета).
4. Прежде чем я продолжу, убедитесь, что имя вашего пакета написано в нижнем регистре, так как npm больше не поддерживает использование верблюжьего/верхнего регистра.
5.Запустите "npm publish", чтобы опубликовать в npm (это не удастся, если на npm с точно таким же именем или если npm находит это имя слишком похожим на другой пакет).
6. Пример сообщения об ошибке, которое вы увидите, если имя другого пакета будет похоже на ваше (403 Forbidden — PUT https://registry.npmjs.org/react-native-rawewebview — Имя пакета слишком похоже на существующие пакеты)или(У вас нет разрешения на публикацию ‹имя вашего пакета›. Вы вошли в систему как правильный пользователь?).
7. Чтобы решить эту проблему, измените свойство name в файле package.json. и повторите команду 5. Или вы можете выполнить поиск по имени с помощью «npm search», чтобы узнать, существует ли уже это имя.
8. Если по-прежнему не удается опубликовать, хорошим вариантом будет добавить область действия, используя ваше имя пользователя. Что-то вроде «@username/package-name», а затем выполнить «npm init — scope=username» команда. Это предложит вам поле, похожее на то, что вы видели в команде 3, но с другими данными, помимо заполняемого имени.
9. Если вы воспользовались командой 8, вам нужно будет сделать свою область общедоступной, запустив «(npm publish — общедоступный доступ)”
10. Вы можете прочитать больше на (https://zellwk.com/blog/publish-to-npm/).
Спасибо за чтение, и, пожалуйста, не забудьте поставить лайк и поделиться этой статьей. Я бы позаботился о том, чтобы публиковать больше контента, поскольку я продолжаю свое приключение и становлюсь старшим разработчиком в (JavaScript, Python и Kotlin).
