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