Оказывается, публикация пакета NPM не так сложно, как предполагает. Эта статья проведет вас через процесс, который я следовал при публикации моего недавнего пакета под названием React-Client-Dimensions . Я решил написать статью с очень специфическим примером, а не общим фиктивным примером, так как я считаю, что такие статьи более ценными, хотя область, которую она охватывает, ограничена.
Прежде чем я прохожу через шаги публикации пакета NPM, позвольте мне сначала рассказать вам о пакете. В нескольких моих хобби -проектах (в основном React) мне нужно отображать другой компонент на основе окна (или клиента или порта просмотра, как бы вы ни называли). Это облегчает выполнение конкретных требований для отзывчивого макета, где медиа -запросы не так просты. Поэтому я написал пользовательский крючок, который говорит мне, каковы размеры клиента, то есть ширину и высота. Я использовал этот крюк в нескольких проектах, поэтому я решил опубликовать его как пакет NPM. Теперь я могу использовать его, просто установив зависимость, а не копировать свой код каждый раз.
Убедитесь, что на вашем компьютере установлен узел. Установка узла также даст вам NPM из коробки, что более чем достаточно, но я предпочитаю использовать пряжу (что будет использовать в этой статье). Выберите, они заменяются друг на друга. Вы можете установить узел из Здесь и пряжа от Здесь Анкет
Первым шагом является создание каталога проекта, который вы хотите опубликовать. В моем случае я создаю папку под названием «React-Client-Dimensions».
mkdir react-client-dimensions cd react-client-dimensions
Чтобы сгенерировать свой файл package.json, запустите команду init in init в вашем каталоге проекта. Мастер CLI проведет вас через серию шагов для создания конфигурации вашего Package.json. В качестве альтернативы, вы можете использовать Yarn init -y, который имеет флаг, чтобы быстро настроить вам конфигурацию по умолчанию.
Это все, что нам нужно, чтобы опубликовать пакет. Я предпочитаю опубликовать пакет на этом этапе, чтобы я мог изменить имя, если он недоступен. Первоначально я попробовал название React-Window-Size Но это уже было взято, поэтому я согласился на React-Client-Dimensions Анкет Чтобы опубликовать, вам нужна учетная запись NPM. В вашей командной строке авторизуйте свои учетные данные для входа в систему, используя команду:
npm login
Перед публикацией рекомендуется добавить лицензию, изменение и файл readme. NPM всегда будет автоматически включать ваш Package.json , readme, ChangeLog и лицензия, несмотря ни на что.
touch README.md CHANGELOG.md LICENSE
Я обычно использую лицензию MIT, которую можно найти Здесь Анкет Мой файл ChangeLog обычно находится в следующем шаблоне.
Чтобы опубликовать наш пакет в регистрации,
npm publish
Теперь мы пишем фактический пакет. Мясо и картофель того, чего мы хотим достичь с помощью упаковки. Обычно исходный код написан в каталоге с именем SRC который отделяет его от остальной части нашей кодовой базы. Это также облегчает объединение всего вашего кода в папку LIB или DIST после того, как вы предварительно обработали свой код для использования производства с использованием таких инструментов, как Babel или WebPack.
Там у нас это есть. Наш исходный код для пакета. Мы почти готовы опубликовать его, но еще не совсем.
Код, который мы написали, использует синтаксис ES6+, который не поддерживается в старых версиях браузера. Например, функции стрел – это функция ES6, и вы можете увидеть статус поддержки здесь. Чтобы заставить наш код работать во всех средах, мы используем компилятор (называемый Babel), чтобы скомпилировать наш код и упаковать его.
Мы устанавливаем зависимости (как зависимости Dev) для Babel, используя следующую команду. Это Dev -зависимости, потому что наш упакованный код не зависит.
yarn add -D @babel/cli @babel/core @babel/preset-env
Babel-это компилятор JavaScript, который преобразует код ES6+ в обратно совместимую версию JavaScript в старых браузерах или средах. Babel CLI (@Babel/CLI)-это инструмент командной строки, который предоставляет вашу командную строку возможность запустить API Babel-Core (@Babel/Core) в вашем исходном коде.
С помощью этих инструментов вы обнаружите, что вам нужно сделать гораздо больше работы, чтобы микроуправление синтаксисами, которые необходимы в вашей целевой среде. Чтобы упростить это, мы добавляем предустановку (@babel/preset-env), которая выполняет эту работу для вас кратким образом.
Теперь нам нужно сообщить нашей конфигурации Babel для использования предварительной установки, которую мы установили. Мы можем сделать это, добавив нашу конфигурацию Babel в наш файл package.json. Мы редактируем наш Package.json Файл, чтобы посмотреть примерно так.
Важные изменения, которые вам нужно отметить, здесь:
Обновите основную точку входа в «lib/index.js», потому что именно здесь мы просим Вабель хранить наш подготовленный к производству исходный код.
Мы добавили наш предварительный настрой @Babel/Preset-ENV в нашу конфигурацию Babel.
Мы добавили сценарий «сборка», который использует Babel CLI для транспилирования нашего кода и поместил его в папку LIB. Вы можете запустить его, используя команду: сборка пряжи.
Каждый раз, когда мы публикуем, нам нужно сначала запустить команду сборки. Мы можем автоматизировать этот шаг, добавив сценарий «подготовьте», который NPM автоматически работает при запуске:
NPM PublishМы хотим, чтобы NPM только опубликовал нашу папку LIB. Итак, мы включаем его в атрибут Files.
В этом случае мы говорим NPM публиковать наш пакет только с определенными файлами и папками (белый список). В качестве альтернативы, вы можете сказать NPM, чтобы избежать определенных файлов и папок (черный список), используя .npmignore file Анкет Тем не менее, я нахожу черный список более неприятного варианта, чем белый список. Вы можете прочитать больше об этих параметрах Здесь и Здесь Анкет
Исходный код, который мы добавили, является новой версией для нашего пакета. NPM не позволит вам опубликовать эту версию без обновления атрибута версии файла 1package.json`. Чтобы сделать это, мы следуем системе выпуска версий под названием Semantic Wrersing. Вы можете прочитать больше об этом Здесь Анкет
Мы хотим исправить обновление нашей версии. Итак, мы бежим NPM версия патч Чтобы обновить нашу версию.
NPM версия Patch -m “Добавлен исходный код для useclientdimensions () крючка”
После того, как наше версию будет сделано, мы готовы опубликовать наш пакет. Просто беги NPM Publish И все готово. Ваш пакет сейчас там. 🙂
Проверьте мою посылку React-Client-Dimensions здесь. Расскажите об этом людям, если вы найдете это полезным.
Спасибо за чтение. Отбросьте мне комментарий, если у вас есть отзывы/предложения. Я очень ценю их.
Хорошего дня.
Оригинал: “https://dev.to/ashwanth1109/how-to-publish-npm-packages-2pge”