Студенты, которые не выпускали пакеты npm, могут испытывать некий трепет перед npm для разработки, думая, что это очень высокая вещь. Было даже интервью. Интервьюер спросил меня, отправлял ли я когда-нибудь npm-пакет. Я только использовал его, но не писал. Я думал, что это будет очень сложно, поэтому я прошептал нет, а затем отпустил меня обратно o (╯□╰) о.
На самом деле, на мой взгляд, пакет npm — это тот, который мы обычно пишем.exportЭто просто модуль, но он слабо связан с другими бизнес-кодами и обладает высокой степенью независимости.
Конечно, чтобы опубликовать пакет npm, в дополнение к написанным компонентам модуля, необходимо выполнить некоторые базовые действия по упаковке. Ниже я недавно разработал"Цифровая клавиатура DigitalKeyboard NPM"Например, перечислите конкретные шаги один за другим:
Написать базовый код модуля;
Зарегистрируйте учетную запись npm;
настроить package.json;
Настроить WebPack;
Добавить модульный тест;
Улучшить README.md;
выпускать
1, 2 и 3 достаточно для завершения npm, а 4, 5 и 6 — для разработки качественного npm.
Демо:
Начинать
Перемещение определенного кодаgithub, пожалуйста, наотмашьДайте ★ Звезду ^_~. Полная структура каталогов выглядит следующим образом:
Теперь просто посмотрите на три файла в каталоге src. Среди них main.js в основном является ссылкой на разрабатываемый модуль, он должен существовать только на этапе разработки, и в то же время, как входной файл веб-пакета на этом этапе, основной код находится в Keyboard.js .
Здесь основное использование — ES6classа такжеexport default, Основная идея Клавиатуры состоит в том, чтобы нажать какую клавишу, чтобы вывести какой контент во внешний мир. Реализация относительно проста, и каждый может ее понять. Это не будет обсуждаться здесь.
Зарегистрируйте npm-аккаунт
Нет необходимости говорить об этом шаге, все идут прямоОфициальный сайтПросто зарегистрируйтесь.
Файл конфигурации в настоящее время также относительно прост, вам нужно только настроить имя пакета npm, имя, которое будет использоваться, теперь ищется npm, а существующее нельзя использовать; версия номера версии, номер версии должен быть обновляться каждый раз при выпуске, иначе выпуск не будет успешным ;иностранныйexportЗдесь я использую файл, упакованный webpack.Если вам не нужен webpack, вы можете напрямую обратиться к src/Keyboard.js, но он должен быть совместим с модуляризацией, о которой мы поговорим позже. Вы также можете указать адрес github и имя автора, где находится проект.Описание и ключевые слова более благоприятны для SEO, но это не обязательные элементы.
На данный момент разработан пакет npm, который можно использовать сразу после публикации. Однако он слегка грубоват: сжатие кода, модульное тестирование и ридми не написаны, а другие не умеют этим пользоваться и не осмеливаются использовать. Улучшайте шаг за шагом ниже.
настроить веб-пакет
Здесь используется последняя версия webpack4.Предоставляется официальный режим разработки производства и разработки, и соответственно выполняется обработка сжатия по умолчанию, что очень подходит здесь. В частности, есть два момента:
libraryTarget: 'umd'
umdНекоторые студенты могут быть не слишком знакомы с ним, но каждый должен знать cmd и amd, которые представляют собой модульные решения, применяемые на стороне сервера и на стороне браузера соответственно. umd совместим с упомянутым ранее модульным подходом. Если вам интересно, вы можете обратиться к моей другой статьеАнализ и резюме дизайна модуля JavaScript.
Вход для производства и разработки отличается:
Запись для разработки — main.js, а запись для производства — Keyboard.js. Как было сказано ранее, ссылка на модуль требуется на этапе разработки, но не требуется для официального релиза, поэтому его нужно настраивать отдельно.
Остальное обсуждать не буду, моя структура конфигурации вебпака очень понятна, вы можете скопировать ее напрямую.
, который похож на сертификат, подтверждающий доступность, дающий людям ощущение безопасности и доверия, поэтому добавление модульных тестов по-прежнему необходимо, и это также может улучшить качество кода. Сначала введем несколько понятий, которые необходимо использовать:
мокко: среда тестирования;
chai: библиотека утверждений, вообще говоря, утверждение предназначено для того, чтобы судить о том, является ли результат кода правильным или нет;
jsdom: на стороне узла нет объекта js dom, такого как окно, документ и т. д., поэтому необходимо предоставить эту библиотеку;
travis-ci: автоматическая интеграция.Например, после того, как мастер-код будет отправлен на github, travis-ci автоматически выполнит автоматическое тестирование.
Вот введение в использование jsdom, В то время он не мог работать в соответствии с несколькими документами:
const {JSDOM} = require('jsdom');
const {window} = new JSDOM(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="author" content="吴胜斌,simbawu">
<title>数字键盘</title>
</head>
<body>
<div id="values"></div>
<div id="app"></div>
</body>
</html>`);
propagateToGlobal(window);
function propagateToGlobal(window) {
for (let key in window) {
if (!window.hasOwnProperty(key)) continue;
if (key in global) continue;
global[key] = window[key];
}
}
Сначала введите JSDOD, затем постройте документ и ввести окно объекта в нем, а затем назначить значение глобальному объекту. На самом деле, это также очень просто, но только первый контакт, и документ написан не ясен, поэтому проводите некоторое время. Несколько других документов неплохо, вы можете увидеть, как я снова использую его. Package.json в это время очень богат, может быть реализованyarn testа такжеyarn coverПосмотрите, проходят ли тесты, и тестовое покрытие.
Полный README.md
Хороший файл readme является ключевым фактором в определении того, будут ли пользователи использовать ваш проект, поэтому вам нужно потратить больше времени и не игнорировать его.
Название: Интуитивно опишите, что делает проект.
значок:С момента создания успеха, кодовый охват, номер версии NPM, сумма загрузки, сертификат с открытым исходным кодом, и кажется, что он полон дерева. Рекомендоватьshields ioДобавьте его, сгенерируйте один раз, а затем обновите автоматически, но вам нужно подождать, пока не будет выпущен npm, чтобы найти его.
С картинками: пусть пользователь интуитивно увидит, как выглядит этот компонент и соответствует ли он его потребностям.
Введение в API: не позволяйте пользователям гадать.
Пример использования: попробуйте снизить порог использования.
выпускать
#先登录NPM账号：
npm login
#会依次让你输入用户名、密码、和邮箱
Username: simbawu
Password:
Email: (this IS public) wsbin610@163.com
#登录成功会出现以下提示信息：
Logged in as simbawu on https://registry.npmjs.org/.
#执行发布命令：
npm publish
#发布成功后会出现以下提示信息：
+ digital-keyboard@1.0.0
#这里digital-keyboard是我的NPM包名，1.0.0是包的版本号
Далее мы можемофициальный сайт нпм, выполнив поиск по имени пакета или увидев только что выпущенный пакет в личном центре.
Широкая реклама
Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.
Добро пожаловать, чтобы обсудить, поставить лайк и перейти ｡◕‿◕｡～
