В этом посте я расскажу, как я создал свой первый нативный пакет npm, и как каждый может создать свой собственный пакет. Я создал пакет react-native-infinite-looping-scroll.

Зарождение

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

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

Я реализовал это с помощью FlatList, добавляя данные снова и снова всякий раз, когда пользователь достигает определенного порога в любом направлении, и удаляя избыточные данные после достижения определенного лимита, поэтому конечный результат выглядел примерно так:

Процедура

Это обзор процедуры, которую я использовал для создания этого пакета. Если вам нужна более подробная процедура, вы можете посетить официальную документацию npm.

Начальная настройка

Сначала вам нужно создать каталог с именем каталога в качестве имени вашего пакета (это необязательно).

После этого запустите команду npm init в этом каталоге, затем она спросит вас о деталях вашего проекта, таких как имя, версия и т. Д., Чтобы создать package.json Не беспокойтесь, если вы не знаете, что заполнить в конкретном поле, просто продолжайте нажимать введите, и вы можете изменить его позже.

После создания package.json создайте папку src, поместите в нее файл компонента и переименуйте его как index.js. В package.json замените значение main на "src/index.js".

Зависимости

Теперь добавьте зависимости в свой проект, он обычно делится на 3 части:

  • peerDependencies Это зависимости, которые требуются компоненту и уже были бы удовлетворены проектом. Например, для любого собственного проекта реакции необходимы react и react-native зависимости, поэтому, если кто-то устанавливает ваш компонент, он должен уже установить эти зависимости, и мы не хотели бы, чтобы он устанавливал их снова.
  • зависимости. Это зависимости, необходимые для проекта, которые могут быть удовлетворены или не удовлетворены проектом, поэтому компонент должен установить их. Например, - lodash или prop-types могут быть для них хорошим примером, если они требуются вашему компоненту, потому что они могут присутствовать или не присутствовать в проекте, поэтому нам лучше их установить.
  • devDependencies Это зависимости, которые потребуются тем, кто хочет внести свой вклад в ваш проект, и будут включать все библиотеки, такие как jest, babel и es-lint, которые необходимы для выполнения тестов. В этом нет необходимости, если вы не настроили тесты для своего проекта.

Управление версиями

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

Тесты

Тесты необходимы всем, кто хочет внести свой вклад в ваш проект для правильного и поддерживаемого кода. Это обширная тема, и я не смогу осветить ее в этой публикации, поэтому давайте оставим ее на другой раз (Я тоже их еще не настраивал;)).

Если у вас все еще есть сомнения, вы можете просмотреть package.json моего проекта для получения дополнительной информации.

Публикация и тестирование

Как только вы закончите с описанными выше шагами, самое время приступить к работе.

Прежде всего, вам необходимо создать для этого учетную запись don npm, просто запустите npm adduser и заполните все необходимые данные.

После этого вы можете проверить, успешно ли создан ваш пользователь, посетив npmjs.org/~yourusername.

Теперь просто запустите npm publish в каталоге вашего проекта, чтобы опубликовать пакет.

После публикации вы можете протестировать пакет в любом проекте React Native, запустив

npm install your-package-name

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

import YourComponent from 'your-package-name'

И протестируйте это. Если это сработает, поздравляем, вы успешно создали свой первый пакет npm.

Обновление

После публикации вы можете обновить свой пакет в любое время, внеся необходимые изменения в компонент, а затем обновив версию в package.json соответственно с помощью семантического управления версиями и запустив npm publish для обновления пакета.

Если это просто обновление патча, вы также можете обновить его, запустив npm version patch в каталоге вашего проекта, чтобы автоматически увеличить версию патча на единицу, а затем запустить npm publish для обновления.

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

Спасибо за чтение;)