Автор оригинала: FreeCodeCamp Community Member.
Carl-johan Kihl
После использования NPM в течение почти 8 лет я узнал о том, как я хотел бы знать, когда начал. Давайте назовем их трюки, вещи, которые резко улучшили свой способ работы с NPM. Сегодня я хочу поделиться своим лучшим 10 трюками с вами.
1. Экономьте время. ⏲ Используйте ярлыки
Это один из самых полезных, но не очень задокументированных функций. Ярлык для команды может показаться тривиальной вещью, но правда в том, что вы напишете 30-60% Меньше кода. Вы экономите время, вы можете потратить на что-то значимое, например, пить дополнительную чашку кофе ☕️?
Вместо NPM Установить <Пакет> Написать NPM Я <Пакет> Отказ
Вместо NPM установить –save <Пакет> Написать NPM I -S <Пакет> Отказ
Вместо NPM установить –save-dev <Пакет> Написать NPM I -D <Пакет> Отказ
Вместо NPM установить –глобал <Пакет> Написать NPM Я -Г. <Пакет> Отказ
? Бонусный ярлык! Хотите произвести впечатление на своих коллег? ? Вот это приходит …
Вместо NPM Тест Написать NPM т .
2. Установите несколько пакетов в одну команду
Зачем писать несколько строк, когда вы можете написать один? ? Если вы знаете свои пакеты в сердце, самый быстрый вариант – установить их все в одноклассник, но будьте осторожны! Один пакет с ошибками и вся команда будет потерпеть неудачу. Если вы не уверены в том, что имена, просто установите их один за другим.
npm i -S react redux react-redux
3. Установите пакеты из разных источников
По умолчанию при запуске NPM-установка NPM установит последнюю версию из NPM-реестр ( https://registry.npmjs.org )
Но есть больше! NPM может установить пакеты из других источников, как URL-адрес или файл тарбола.
При создании собственных пакетов или вытяжных запросов для существующих пакетов эта функция мощна. Например, если у вас есть собственная вилка Redux , вы можете установить свой пакет прямо с вилки. (Изменить Имя пользователя Ваше имя пользователя на GitHub.)
npm i
Еще лучше, если вы используете репозиторий GitHub, вы можете использовать этот ярлык:
NPM i Имя пользователя/Redux.
Есть больше! Вы также можете установить пакет из определенной ветки. Полезно при тестировании будущего выпуска. Просто добавьте # вместе с именем ветви в конце.
npm i username/redux#
? Бонусный ярлык! Вы не используете GitHub? Нет забот, есть ярлыки для Битбукет и Gitlab также:
npm i bitbucket:username/myrepositorynpm i gitlab:username/myrepository
4. Связывание пакетов
Иногда вы хотите работать над проектом и одновременно разработать его пакеты. Соблюдайте и нажав пакет на удаленный репозиторий для всех изменений, которые вы хотите попробовать, является утомительным! ? Вместо этого вы можете использовать функцию под названием Пакет ссылки Отказ
Пакет ссылки Работает, создавая SymLink в папке Node_Modules, которая указывает на локальный репозиторий вашего пакета. Таким образом, вы можете редактировать пакеты локально, и изменения будут мгновенно доступны в проекте, используя его.
Самый простой способ понять Пакет ссылки это попробовать это! Скажем, у нас есть проект под названием MyProject и пакет называется MyPackage . Мы хотим MyPackage быть зависимостью MyProject Отказ
Перейти к папке MyPackage и написать
npm link
Отлично! Теперь перейдите к папке MyProject и написать
NPM ссылка MyPackage
Выполнено! Поближе взглянуть на структуру папки
Как вы можете видеть, MyProject/Node_Modules/MyPackage теперь является симчидкой к папке MyPackage ! Теперь вы можете продолжать развиваться MyPackage и все изменения, которые вы делаете, будет мгновенно доступен в MyProject Отказ
5. Команда NPX
Существует много сценариев на NPM, вы, вероятно, будете использовать, но не будет частью вашего разъема времени выполнения. Grunt, Gulp, React-Create-Create-App, React-Nature-Cli и Mocha – это всего лишь немногие.
До NPM 5.x вы должны были установить эти инструменты как глобальные пакеты, либо как DevDependonds. Это было трудоемким, не только установленным, но для поддержания всех ваших инструментов для нескольких проектов. Кроме того, большинство инструментов вы будете использовать только один или два раза.
Здесь двоичная NPX приходит к спасению и экономит много работы для нас! Например, чтобы начать новый реагировать проект, вы можете просто написать:
NPX Create-React-App My-New-Project
Последняя версия Create-React-App будет загружен и выполнен немедленно. Нет больше установки и обслуживания инструментов как глобальные пакеты.
6. Монитор и очистите свой проект
Важно понимать, что происходит под капотом при установке пакетов, чтобы решить проблемы и сделать дерево зависимостей и формального размера расслоения как можно меньшее.
Прежде всего, нам нужен хороший обзор дерева зависимости, и какие версии пакета на самом деле были установлены. Используйте команду Список NPM Отказ Добавить флаг --depth = 0 Чтобы перечислить только пакеты верхнего уровня и добавить -G Чтобы перечислить ваши глобальные пакеты.
Список NPM Listnppm -G
NPM хорош в поддержании себя и сглаживает дерево зависимостей на лету, но это всегда хорошая привычка дедеп Ваш проект перед публикацией. Это может удалить несколько пакетов для вас.
NPM Dedupe.
Это также отличная идея получить хороший обзор ваших устаревших и пропущенных пакетов. Трудно не любить эту точку зрения для своих хорошо организованных колонн и цветовой схемы Рождества ??
NPM устарел
Если вы получите много красных рядов, вам нужно запустить Обновление NPM Чтобы обновить свои пакеты на последнюю возможную версию в соответствии с вашим Public.json, который также указан в хотел столбец
Обновление NPM
Большой! Теперь, если вы запустите NPM пододеется Опять же, все красные ряды должны исчезнуть.
Если вы используете CARET ^ Перед вашим версиями в Package.json основные версии не будут обновлены (отсюда и желтые строки). Это хорошо, потому что могут быть разбиты изменения обновления на новую основную версию.
Если вы все еще хотите обновить все до последней версии, вы можете использовать инструмент NPM-Update-all Отказ Это так же просто, как выполнить эту команду в папке проекта.
NPX NPM-Update-all
Прохладный! Теперь вы получили последнюю версию всех ваших зависимостей. Ваша Package.json также обновляется. ⚠️ Будьте в курсе обмена изменениями ⚠️
7. Перейти на домашнюю страницу для пакета
Нужно проверить документацию для пакета? Зачем переключаться в браузер и начать Googling, когда все, что вам нужно, это терминал? ?
Откройте репозиторий для пакета в браузере
NPM REPO
Открыть домашнюю страницу
NPM Home
Откройте документацию
NPM Docs
8. Используйте сценарии NPM
Я люблю NPM-скрипты! Вместо использования задач-бегунов, таких как Gulp, и Grunt для автоматизации повторяющихся задач, которые вы можете, в большинстве случаев используйте NPM-скрипты вместо нескольких причин:
➕ Меньшее количество dev-зависимостей или глобальные зависимости для обслуживания. ➕ Нет новых инструментов для участников команды и членов команды для изучения ➕ Меньше кода и конфигурации.
Прежде всего, у вас есть предопределенные сценарии, такие как Начать, установить, тестировать, prepublish которые имеют особые значения в НПМ. Вы можете прочитать о том, как их можно использовать в моем Предыдущее руководство где мы строим пакет NPM с нуля.
Вы также можете создавать собственные пользовательские сценарии. Вот пример сценария, который отформатирует ваш код в SRC папка с Eslint :
Package.json:
"scripts":{"test": "jest","format": "eslint src --fix"}Теперь вы можете запустить NPM Run Format и Eslint сделаю свою работу.
Вы можете сделать много вещей с помощью NPM-скриптов, таких как работает Shell-команды и сценарии цепочки после друг друга. Проверьте NPM-скрипты Для более глубокого понимания этой мощной особенности.
9. Бег сценариев NPM в VSCode
Иногда у меня есть 30 NPM-скрипты в моей упаковке.json (не шучу). ? К счастью, если вы используете Визуальный студийный код , вы можете перечислить все ваши NPM-скрипты в Explorer и запустите скрипты одним щелчком нажатия кнопки! Убедитесь, что эта настройка включена:
npm.enablescriptexplorer: правда
10. Установите значения по умолчанию
При создании нового проекта вы запускаете NPM init И вам будут заданы вопросы о вашем проекте. Чтобы сэкономить время, вы, вероятно, напишите Run NPM init -y Чтобы заполнить Package.json с значениями по умолчанию.
Но что именно ваши значения по умолчанию? ? Я люблю устанавливать некоторые из них, чтобы сэкономить время дальше! ?
Набор настроек NPM Config init.author.name “Carl-johan (C-J) KIHL” NPM Config набор init.author.email “carljohan.kihl@mail.com”
Резюме
Это были мои советы для NPM сейчас! Если у вас есть больше советов и трюков, которые вы хотите поделиться, добавьте комментарий ниже! ?
? Бонусный ярлык! Представьте, что это ночь в пятницу И вы собираетесь доработать новый проект, но вы слишком устали, чтобы написать NPM Dedupe. . ?
Не стоит беспокоиться! Сохранить три буквы, написав:
NPM DDP.
Спасибо за чтение.