Я знаю, что ты думаешь. WAT?! Не глотал просто убил хрюкать? Почему мы не можем просто быть довольным на несколько минут здесь, в земле JavaScript? Я слышу, но …
Давайте начнем с примера …
Я был большим поклонником глотал. Но в моем последнем проекте я оказался 100-х годов в моем глоткости и вокруг дюжины плагинов Гульпов. Я изо всех сил пытался интегрировать WebPack, BrowserSync, Hot Reloading, Mocha и многое другое, используя глотку. Почему? Ну, некоторые плагины имели недостаточную документацию для моего случая использования. Некоторые плагины только открыли часть API, который мне нужна. У одного была странная ошибка, где она будет смотреть только небольшое количество файлов. Еще один разделил цвета при выводе в командную строку.
Это разрешимые проблемы, но Ни одно из этих проблем не произошло, когда я назвал инструменты напрямую.
В последнее время я заметил, что многие проекты с открытым исходным кодом просто используют сценарии NPM. Я решил отступить и пересмотреть. Мне действительно нужно глотать? Оказывается, я не сделал.
Я решил попробовать использовать только сценарии NPM в моем новом проекте с открытым исходным кодом. Я создал богатую среду Dev Environment и построить процесс приложений RECTATION, используя только сценарии NPM. Любопытно, что это выглядит? Проверить React Ringshot . Я прохожу, как создать этот процесс сборки с использованием сценариев NPM в « построение среды разработки JavaScript » на множестве.
Удивительная вещь, я сейчас предпочитаю работать с помощью сценариев НПМ по глотанию. Вот почему.
Что не так с глотанием и ворчанием?
Со временем я заметил три основных вопроса с задачами, такими как Gulp и Grunt:
- Зависимость от авторов плагинов
- Расстраивание отладки
- Разгрузочная документация
Давайте рассмотрим каждую из этих вопросов.
Выпуск № 1.: Зависимость от авторов плагинов
Когда вы работаете с новыми или непопулярными технологиями, плагин не может существовать вообще. И когда существует плагин, он может быть устаревшим. Например, Бабел 6 был недавно выпущен. API значительно изменился, поэтому многие плагины Gulp были несовместимы с последней версией. При использовании Гульпа я застрял, потому что плагин Gulp, который мне нужен, не был обновлен.
С Glp или Crunt вы должны дождаться сопровождающих плагинов, чтобы предоставить обновления или исправить его самостоятельно. Это задерживает вашу способность использовать новые версии современных инструментов. Напротив, Когда я использую сценарии NPM, я употребляю инструменты непосредственно без дополнительного слоя абстракции Отказ Это означает, что новые версии Mocha, Istanbul, Babel, WebPack, Browserify и SO включены, я могу немедленно использовать новые версии.
С точки зрения отбора ничего не сравнится с НПМ:
Быть справедливым, если плагин Grunt или GruTP, который вам нужен, вы, безусловно, можете напрямую использовать пакеты NPM напрямую. Но тогда вы больше не используете глоток или ворчание для этой конкретной задачи.
Выпуск № 2: разочаровывающие отладки
Поскольку интеграции терпят неудачу, отладки в грысе и глотали могут быть расстраиваются. Поскольку вы работаете с дополнительным слоем абстракции, есть более потенциальные причины для любой ошибки:
- Базовый инструмент сломан?
- Разбил ли плагин Grunt/Gulp?
- Моя конфигурация сломана?
- Я использую несовместимые версии?
Использование сценариев NPM устраняет # 2. И я нахожу # 3 гораздо менее распространенным, так как обычно я обычно называю интерфейс командной строки инструмента. Наконец, № 4 реже распространяется, поскольку я сократил количество пакетов в моем проекте, используя NPM напрямую, вместо использования абстракции бегуна задач.
Выпуск № 3: Разгрузочная документация
Документация для основных инструментов, которые мне нужны, почти всегда лучше, чем ассоциированные плагины Grunt и Gulp. Например, если я использую Gulp-Eslint, я в конечном итоге расщепляю мое время между Gulp-Eslint Документы и веб-сайт Eslint. Я должен переключить контекст между плагином и инструментом, который он является абстрагированием. Основная часть трения в Гульпе и Грунт это:
Большинство инструментов, связанных с построению, предлагают четкие, мощные и хорошо документированные интерфейсы командной строки. Смотрите Документы на CLI Eslint’s Cli как хороший пример. Я нахожу чтение и внедрение короткой командной строки вызова в сценариях NPM более четко, нижнее трение и легче отлаживать (так как есть слой снята абстракции).
Теперь, когда я установил обезболивающие очки, вопрос в том, почему мы думаем, что нам нужны заданные бегуны, такие как Gulp и Grunt?
Почему мы проигнорировали NPM для сборки?
Я верю, что есть четыре основных заблуждения что привело к глотанию и ворчу становится так популярным:
- Люди думают, что сценарии NPM требуют сильных навыков командной строки
- Люди думают, что сценарии NPM недостаточно сильны
- Люди думают, что потоки Гульпа нужны для быстрых сборки
- Люди думают, что сценарии NPM не управляют поперечной платформой
Давайте рассмотрим эти заблуждения в порядке.
Заблуждение № 1: Сценарии NPM требуют сильных навыков командной строки
Вам не нужно много знать о командной строке вашей операционной системы, чтобы насладиться силой сценариев NPM. Конечно, Greep, Sed, awk и Трубы навыки пожизнены навыки, но Вам не нужно быть мастером командной строки Unix или Windows для использования сценариев NPM . Вы можете использовать 1000 пакетов в НПМ, чтобы вместо этого выполнить работу.
Например, вы можете не знать, что в UNIX это решительно удаляет каталог: RM -RF. Это нормально. Вы можете использовать Римраф который делает то же самое (и работает перекрестная платформа для загрузки). Большинство пакетов NPM предлагают интерфейсы, которые предполагают очень мало знаний о командной строке вашей ОС. Просто поиск NPM для пакетов, которые делают то, что вам нужно, прочитайте документы, узнайте, как вы идете. Я имел обыкновение искать плагины Gulp. Теперь я ищу пакеты NPM вместо этого. Отличный ресурс: библиотеки .io Отказ
БИЗНЕНИЕ № 2: Сценарии NPM недостаточно сильны
Сценарии NPM удивительно мощны самостоятельно. Есть конференция Pre и Post Cooks :
{
"name": "npm-scripts-example",
"version": "1.0.0",
"description": "npm scripts example",
"scripts": {
"prebuild": "echo I run before the build script",
"build": "cross-env NODE_ENV=production webpack",
"postbuild": "echo I run after the build script"
}
}Все, что вы делаете, следует следить за конвенцией. Выше скрипиты будут работать в порядке на основе их префикса. Сценарий Prebuild будет выполняться перед скриптом сборки, потому что он имеет одно и то же имя, но с префиксом с «Pre». Сценарий Postuitild будет работать после сценария сборки, потому что он имеет префикс «пост». Таким образом, если я создаю скрипты с именем Prebuild, Build и PostBuild, они будут работать автоматически в этом порядке, когда я вводит сборку NPM Run Constate`.
Вы также можете разложить большие проблемы, вызвав один скрипт из другого:
{
"name": "npm-scripts-example",
"version": "1.0.0",
"description": "npm scripts example",
"scripts": {
"clean": "rimraf ./dist && mkdir dist",
"prebuild": "npm run clean",
"build": "cross-env NODE_ENV=production webpack"
}
}В этом примере задача предварительной подготовки вызывает чистую задачу. Это позволяет разлагать ваши сценарии на небольшую, хорошо называемую единую ответственность, одноклассников.
Вы можете вызвать несколько сценариев последовательно на одну строку, используя &&. Скрипты на чистоте выше выше, будут работать один за другим. Эта простота действительно заставит вас улыбаться, если вы тот, кто боролся с получением списка задач, чтобы запустить в порядок в Голпе.
И если команда становится слишком сложной, вы всегда можете вызвать отдельный файл:
{
"name": "npm-scripts-example",
"version": "1.0.0",
"description": "npm scripts example",
"scripts": {
"build": "node build.js"
}
}Я звоню отдельным скриптом в задаче сборки выше. Этот скрипт будет запущен узлом, и, таким образом, может использовать любые нужные им пакеты NPM и используете всю мощность JavaScript внутри.
Я мог бы продолжать, но Основные функции документированы здесь Отказ Кроме того, есть также короткий Плюсульский курс по использованию NPM в качестве инструмента сборки Отказ Или проверить React Ringshot Например все это в действии.
Заблуждение № 3: Потоки Гульпа необходимы для быстрой сборки
Гульпу быстро завоевала тяги над ворчанием, потому что потоки в памяти Громп быстрее, чем подход, основанный на файле Grunt. Но вам не нужно глотать, чтобы насладиться силой потоковой передачи. На самом деле, Потоковая передача всегда была встроена как в Unix, так и в командных строках Windows Отказ Оператор трубы (|) понижает вывод одной команды на вход другой команды. И оператор перенаправления (>) перенаправляет вывод в файл.
Так, например, в Unix я могу использовать `grep` Содержимое файла и перенаправьте вывод в новый файл:
grep 'Cory House' bigFile.txt > linesThatHaveMyName.txt
Работа выше потокота. Промежуточные файлы не написаны. (Удивительно, как сделать команду выше на перекрестной платформе? Читать дальше…)
Вы также можете использовать оператор «&» для запуска двух команд одновременно на UNIX:
npm run script1.js & npm run script2.js
Две скрипты выше будут работать одновременно. Для запуска скриптов одновременно пересекают платформу, используйте NPM-Run-all Отказ Это приводит к следующему заблуждению …
БИЗНЕНИЕ № 4: Сценарии NPM не управляют кроссплатформой
Многие проекты привязаны к конкретной операционной системе, поэтому кроссплатформенные проблемы не имеют значения. Но если вам нужно запустить кроссплатформу, сценарии NPM все еще могут работать отлично. Бесчисленные проекты с открытым исходным кодом являются доказательством. Вот как.
Командная строка вашей операционной системы запускает ваши сценарии NPM. Таким образом, на Linux и OSX ваши сценарии NPM работают на командной строке UNIX. В Windows, сценарии NPM работают на командной строке Windows. Таким образом, если вы хотите, чтобы ваши сценарии сборки запустились на всех платформах, вам нужно сделать как Unix, так и Windows Happy. Вот три подхода:
Подход 1: Использовать Команды, которые управляют кроссплатформой Отказ Есть удивительное количество перекрестных платформных команд. Вот несколько:
&& chain tasks (Run one task after another) < input file contents to a command > redirect command output to a file | redirect command output to another command
Подход 2: Используйте узловые пакеты. Вы можете использовать узел пакеты вместо команд Shell. Например, используйте Rimraf. вместо `rm -rf `. Использовать кросс-эн Чтобы установить переменные среды в перекрестной платформе. Поиск Google, NPM или библиотеки .io За то, что вы хотите сделать, и есть почти наверняка узловой пакет, который получит его перекрестную платформу. И если ваши звонки командной строки становятся слишком длинными, вы можете вызвать пакеты узлов в отдельных сценариях, как это:
node scriptName.js
Скрипт выше является простым старым JavaScript, управляемый узлом. И поскольку вы просто называете скрипт в командной строке, вы не ограничены файлами .js. Вы можете запустить любой скрипт, что ваша ОС может выполняться такими как Bash, Python, Ruby или PowerShell.
Подход 3 : Используйте Shelljs Отказ Shelljs – это пакет NPM, который запускает команды UNIX через узел. Таким образом, это дает вам возможность запустить команды UNIX на всех платформах, включая Windows.
Я использовал комбинацию подхода № 1 и № 2 на React Ringshot Отказ
Болевая точка
По общему признанию, некоторые недостатки: JSON SPEC не поддерживает комментарии, поэтому вы не можете добавить комментарии в Package.json. Есть несколько способов работы по этому ограничению:
- Написать маленькие, хорошо называемые сценарии одной цели
- Скрипты документов отдельно (например, readme.md)
- Позвоните в отдельный файл .js
Я предпочитаю вариант № 1. Если вы нарушаете каждый скрипт, чтобы иметь одну ответственность, комментарии редко необходимо. Имя скрипта должно полностью описать намерение, как и любая небольшая хорошо называемая функция. Как я уже обсуждаю в ” Чистый код: написание кода для людей “, небольшие односторонние функции ответственности редко требуют комментариев. Когда я чувствую комментарий необходим, я использую опцию № 3 и переместите скрипт в отдельный файл. Это дает мне всю композиционную силу JavaScript, когда мне это нужно.
Package.json также не поддерживает переменные. Это звучит как большая сделка, но это не по двум причинам. Во-первых, наиболее распространенные потребности в переменных вращаются вокруг среды, которые вы можете установить в командной строке. Во-вторых, если вам нужны переменные по другим причинам, вы можете вызвать отдельный файл .js. Проверьте React-Starter-kit Для элегантного примера этой картины.
Наконец, существует также риск создания длительных, сложных аргументов командной строки, которые трудно понять. Обзоры кода и устойчивые рефакторинги – отличный способ обеспечить, чтобы сценарии НПМ разлагаются на небольшие, хорошо называемые функции однозначных целей, которые все понимают. Если это достаточно сложно, чтобы понадобиться комментарий, вы, вероятно, решакторуете один скрипт в несколько хорошо называемых сценариев или извлеките его в отдельный файл.
Абстракции должны быть оправданы
Гунп и Грунт – это абстракции по поводу инструментов, которые я использую. Абстракции полезны, но абстракции имеют затраты. Они утечки. Они делают нас зависимыми от сопровождающих плагинов и их документации. И они добавляют сложность путем увеличения количества зависимостей. Я решил, что задачи бегунов, как Gulp, и Grunt – это абстракции, я больше не нужен.
Ищете детали? Я прохожу, как создать процесс сборки с использованием сценариев NPM с нуля в « построение среды разработки JavaScript » на множестве.
Комментарии? Chime в ниже или на Reddit или Hacker News Отказ
Наконец, я далеко от первого человека, чтобы предложить этому. Вот несколько отличных ссылок:
- Автоматизация задач с запуском NPM — Джеймс Холлидей
- Усовершенствованная интерфейсная автоматизация с помощью сценариев NPM – Кейт Хадсон
- Как использовать NPM в качестве инструмента сборки – Kieth Cirkel.
- Введение в NPM в качестве инструмента сборки – Маркус Хаммарберг
- Гульп потрясающий, но нам действительно нужно? — Гонто
- Сценарии NPM для сборки инструментов – Эндрю Берджесс
Дом Кори Автор « React и Redux в ES6 », « Чистый код: Написание кода для людей «И несколько других курсов по плютам . Он является программным архитектором в Винерсиях и Поезда разработчиков программного обеспечения на международном уровне О программных методах, таких как интерфейс разработки и чистого кодирования. CORY – это Microsoft MVP, эксперт для разработчика Teleerik, а основатель OutlierDeveloper.com Отказ
Оригинал: “https://www.freecodecamp.org/news/why-i-left-gulp-and-grunt-for-npm-scripts-3d6853dd22b8/”