Как написать и опубликовать свой первый пакет NPM

Мы напишем библиотеку, которая помогает генерировать border-radius для элементов HTML, и назовем ее «radiuswizard». Это просто пример библиотеки, которая даст нам представление о том, как пишутся и публикуются пакеты NPM. Начнем.

Что вам нужно для начала:

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

2- Перейдите в консоль и запустите npm adduser , затем введите свой аккаунт NPM информацию.

Мы создадим папку под названием «radiuswizard» для нашего проекта (вы можете называть ее как хотите).

  mkdir radiuswizard &&  cd radiuswizard  

Откройте этот проект в редакторе кода, чтобы начать писать свой пакет.

Мы создадим новый файл, index .js , который будет содержать нашу функцию JavaScript:

  function radiuswizard (options) {let elements = document.querySelectorAll ('. radiuswizard') elements.forEach (  el => {if (options.circle) {el.style.borderRadius = '50% '} else {el.style.borderRadius = `25px`}})} module.exports.radiuswizard = radiuswizard  

Давайте разберемся, что происходит в этом файле. Для начала наша функция radiuswizard принимает объект параметров, в то время как наша переменная elements представляет все элементы, имеющие класс .radiuswizard .

Если пользователь передает круг в качестве опции, элементы получат border-radius , равный 50%, иначе значение по умолчанию будет 2 5 p x 25px 25px.

Конечно, прежде чем мы опубликуем наш пакет, нам нужно подробно рассказать о нем. Для этого добавим файл README.md :

  # Описание пакета npm для добавления border-radius к вашим элементам. # Установка `npm  i radiuswizard --save` `` импортировать {radiuswizard} из 'radiuswizard';  radiuswizard ({circle: false}) `` ## Параметры radiuswizard поддерживает только одну опцию: - _circle_ - _boolean_ (по умолчанию false)  

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

… И мы закончили писать пакет 😁

Чтобы опубликовать наш пакет, нам нужно для развертывания этого проекта в Github.

Мы создадим новый общедоступный репозиторий с именем radiuswizard . Если вы впервые создаете репозиторий на GitHub, проверьте это: Github-docs.

Затем запустите эти команды в консоли:

  git initgit add .git remote add origin git@github.com: LaasriNadia/radiuswizard.git //не забудьте заменить LaasriNadia вашим именем пользователя Github git push -u origin master  

Еще один шаг перед публикацией пакета — добавить package.json в наш проект. Для этого мы запускаем:

  npm init  

Он задаст вам несколько вопросов, на которые мы ответим (нажмите Enter , чтобы пропустить другие вопросы):

 description: border-radius для ваших элементовkeywords: border-radiusauthor: укажите здесь свое имя 

Теперь мы готовы опубликовать наш пакет NPM. 🚀

Единственное, что нам нужно сделать, чтобы опубликовать наш пакет, — это запустить:

  npm publish  

Если вы получили эту ошибку:

  40 Запрещено - PUT https://registry.npmjs.org/radiuswizard - Radiuswizard нельзя повторно опубликовать, пока не пройдут 24 часа  .  

Это потому, что мы используем то же имя для этого пакета, поэтому вернитесь в файл package.json и измените значение имени этого пакета. package, затем снова запустите npm publish.

Чтобы убедиться, что ваш пакет опубликован, перейдите на npmjs.com и найдите имя вашего пакета. У вас должно получиться что-то вроде этого: h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / r a d i u s w i z a r d https://www.npmjs.com/package/radiuswizard https://www.npmjs.com/package/radiuswizard

Мы будем Теперь возьмите на себя роль пользователя и воспользуйтесь только что созданным пакетом. Выполните:

  mkdir radiususage && cd radiususage npm init -y  

Давайте создадим файл index.html в этом каталоге:

        Document         

Мы добавили изображение и дали ему класс radiuswizard .

Давайте добавим индекс. js файл:

  импорт {radiuswizard} из 'radiuswizard'; radiuswizard ({circle: false})  

Давайте теперь установим наш пакет, запустим:

  npm i radiuswizard --save  

Теперь мы готовы протестировать наш пакет .

Нам нужен сборщик javascript, для этого мы будем использовать parcel, что легко и не требует настройки. Если у вас его нет на вашем компьютере, установите его, выполнив следующее:

  npm i parcel -g  

Когда установка завершена, запустите сервер разработки:

  parcel index.html  

Теперь откройте:

h t t p : / / l o c a l h o s t : 1 2 3 4 / i n t h e b r o w s e r http://localhost: 1234/в браузере http://localhost : 1234/inthebrowser

Вот что вы должны увидеть:

Ура !! Он работает, у нашего изображения радиус границы 2 5 p x 25px 25px, как мы указали в нашем пакете. 🤩

Теперь давайте попробуем вариант круга - вернемся к файлу index.js и присвоим кругу истинное значение вместо ложного:

  import {radiuswizard} from 'radiuswizard'; radiuswizard ({circle: true})  

Теперь радиус границы 50% равен применительно к нашему изображению:

Все работает как положено. 🥳

Поздравляем с написанием и публикацией вашего первого пакета NPM ✅.

Оцените статью
nanomode.ru
Добавить комментарий