Что такое NPM?
npm - это менеджер пакетов для Node.js. Также онлайн-база данных, содержащая более миллиона инструментов (пакетов) для разработки javascript. Чтобы загрузить пакет из npm, все, что вам нужно сделать, это выполнить команду:
npm install <package>
И пакет будет автоматически загружен в папку node_modules вашего проекта. Вы можете использовать это прямо сейчас. Это экономит время разработчиков. Как библиотека с открытым исходным кодом, вы также можете поделиться своими классными вещами, опубликовав их на npm.
Давайте создадим простой и полезный пакет, а затем опубликуем его в npm.
Создать проект
Сначала нам нужно скачать npm. Мы можем получить это, установив Node.js. Давайте скачаем Node.js с официального сайта.
Откройте свой терминал и запустите:
npm -v
Если отображается информация о версии, это означает, что вы успешно ее установили.
Затем создайте новую папку и инициализируйте эту папку.
mkdir react-scroll-up-button cd react-scroll-up-button npm init
Создайте папку src и папку lib в корневом каталоге. Мы поместим наш реагирующий компонент в папку .src. И файл js после компиляции появится в папке .lib.
Изменить package.json
После запуска npm init -y автоматически будет создан файл package.json. Обычно этого достаточно, чтобы развиваться. Но чтобы опубликовать этот проект в npm, нужно позаботиться о некоторых деталях. Просто отредактируйте файл package.json, как показано ниже:
- name: имя этого пакета. Имя пакета нельзя использовать повторно. Поэтому, прежде чем давать проекту имя, лучше проверить в npm, существует ли пакет с таким же именем или нет.
- версия: версия пакета. Не забывайте обновлять версию каждый раз, когда вы обновляете этот пакет.
- описание: он станет подзаголовком этого пакета на официальном сайте npm. Чем точнее он, тем больше у людей шансов найти этот пакет.
- main: это точка входа в этот пакет. Убедитесь, что путь правильный.
- репозиторий: здесь размещен исходный код этого пакета. Например, если вы разместите код на GitHub. Просто введите здесь URL-адрес репозитория GitHub.
- ключевые слова: будут тегами этого пакета на официальном сайте npm. Предназначен для облегчения поиска посылок.
- ошибки: должно быть место, где пользователи могут сообщать об ошибках. Обычно это то же место, что и хранилище.
- скрипты: скрипты, которые мы использовали для запуска этого проекта. Например, мы используем webpack для объединения этого проекта, поэтому мы создаем сценарий «build» для запуска webpack.
После того, как мы закончили редактировать package.json, давайте установим инструменты и библиотеки, которые мы собираемся использовать. Как React, Webpack, Babel и Material UI.
npm install webpack webpack-cli npm install react npm install babel-loader @babel/core npm install @babel/preset-env @babel/preset-react npm install @babel/preset-stage-0 npm install @material-ui/core
Создайте webpack.config.js
Далее мы собираемся настроить файл конфигурации webpack. Создайте файл webpack.config.js. В этом файле мы передаем в webpack некоторую важную информацию, такую как ввод проекта и форма вывода.
- запись: Путь к нашему файлу компонента React.
- вывод: это объект. Путь указывает место, где файл javascript будет после компиляции. В нашем проекте это папка lib. И имя файла - это его имя.
- правила: это объект. Мы устанавливаем здесь правила. Правила использования инструментов для компиляции при работе с разными типами файлов. В нашем проекте мы используем babel-loader для компиляции файлов с расширением .js, css-loader для компиляции файлов с расширением .css.
- решение: когда люди импортируют наш пакет в свой собственный проект, вероятно, некоторые пакеты будут использоваться с обеих сторон, но в разных версиях. Он все время реагирует и реагирует. Мы должны поместить их сюда, чтобы предотвратить потенциальный конфликт.
Это некоторые базовые настройки, которые подходят для большинства ситуаций.
Создайте .babelrc
Использование JSX с response - это круто. Но браузер не может читать JSX. Вот почему мы используем babel для компиляции JSX в javascript. Просто поместите пакеты, которые мы собираемся использовать, в пресеты.
.npmignore, .gitignore и Readme.md
.npmignore предназначен для фильтрации файлов, которые нам не нужно публиковать в npm. .gitignore предназначен для фильтрации файлов, которые нам не нужно отправлять на GitHub.
Readme.md предназначен для ознакомления с вашим пакетом. Он отображается как в репозитории npm, так и на GitHub. Лучше предоставить здесь как можно больше подробностей. Потому что большинство людей обычно скачивают пакеты с полной информацией. Если вы создадите супер-убийственный пакет, но без Readme.md, никто не будет его использовать.
Создать пакет реакции
После того, как мы все настроили, займемся кодом. Я собираюсь создать простой, но полезный пакет, который представляет собой кнопку прокрутки вверх. Это будет кнопка, нажмите ее, и вы вернетесь в верхнюю часть веб-страницы, где бы вы ни находились.
Вы можете создавать здесь все, что захотите. Это не имеет значения, потому что наша задача - как опубликовать это.
Так что давайте пропустим, как создать этот реагирующий компонент. Просто проверьте код, если вам интересно.
Попробуйте на localhost
После того, как мы закончили реагировать, просто запустите:
npm run build
В идеале мы получим сообщение об успехе. Прежде чем опубликовать его, мы должны проверить, работает этот пакет или нет. Запустить :
npm pack
Затем будет создан файл .tgz. Давайте установим его в другой проект со случайной реакцией и импортируем в компонент. Используйте локальный путь к этому пакету для его установки, как показано ниже:
npm install /Users/wangweian/Desktop/xxxxxxxxxxx.tgz
В идеале этот пакет рабочий!
Опубликовать в npm
После того, как мы успешно запустим этот пакет на localhost. Мы можем опубликовать это!
Нам нужна учетная запись npm. Если у вас его нет, просто создайте его.
Первый раз авторизуйтесь на localhost, запустите:
npm adduser
Если нет, запустите:
npm login
После успешного входа в систему мы можем опубликовать его, запустить:
npm publish
Мы получим сообщение об успешном завершении. Затем подождите пару минут, перейдите на сайт npm и найдите наш пакет. Когда мы видим это на сайте npm, все готово!
Не забывайте проверять версию каждый раз перед публикацией. Если вы забудете обновить версию, публикация не удастся.
В конце концов, давайте импортируем этот пакет и посмотрим, как он выглядит:
Это оно! Надеюсь, вам это понравится, и вы опубликуете несколько интересных вещей на npm.
