Как понять, что в мире фронтенда всё плохо — 2

В прошлой статье я написал о количестве зависимостей у среднестатистического сборщика (попсовый Вебпак и пр. пока в расчёт не берём). Теперь интересно взглянуть на сами зависимости.

Любой, кто когда-нибудь писал задачи для Галпа знает, что есть такая тулза как gulp-util (здесь и далее определим её как util). Обычно её используют только для двух задач: определить установлен ли какой-либо флаг (util.env) и вывести определённую информацию в логи (util.log) при возникновении ошибки. Окей, о них и поговорим.

Определение флагов

Тут совсем кратенько — чтобы узнать, установлен ли какой-то флаг, достаточно проверить массив process.env на нахождение в нём подстроки вида −−name=value (или просто −−name, как вам удобнее). Нет смысла накручивать что-то большее, т. к. сборка в любом случае делается для себя и вы-то точно знаете, какие флаги и как вводите.

Таким образом имеем строку, которая решает поставленную задачу:

var isProduction = process.argv.indexOf('--production') > -1;

gulp-util для этого использует библиотеку minimist, а значит мы экономим одну зависимость.

Вывод логов

Обычно для вывода логов используется что-то вроде такого:

gulp.src(..)
  .pipe(..)
  .on('error', util.log)
  ..

Тут можно было бы ответить ещё короче: console.log. Оно работает, правда. Обработчик типа того, что выше, вешают для того, чтобы не падала сборка, и чтобы сообщения были более информативными. Так вот console.log решает обе эти задачи.

Интересно посмотреть на дерево зависимостей gulp-util:

gulp-util@3.0.7
├── array-differ@1.0.0
├── array-uniq@1.0.3
├── beeper@1.1.0
├─┬ chalk@1.1.3
│ ├── ansi-styles@2.2.1
│ ├── escape-string-regexp@1.0.5
│ ├─┬ has-ansi@2.0.0
│ │ └── ansi-regex@2.0.0
│ ├─┬ strip-ansi@3.0.1
│ │ └── ansi-regex@2.0.0
│ └── supports-color@2.0.0
├─┬ dateformat@1.0.12
│ ├── get-stdin@4.0.1
│ └─┬ meow@3.7.0
│   ├─┬ camelcase-keys@2.1.0
│   │ └── camelcase@2.1.1
│   ├── decamelize@1.2.0
│   ├─┬ loud-rejection@1.6.0
│   │ ├─┬ currently-unhandled@0.4.1
│   │ │ └── array-find-index@1.0.2
│   │ └── signal-exit@3.0.1
│   ├── map-obj@1.0.1
│   ├─┬ normalize-package-data@2.3.5
│   │ ├── hosted-git-info@2.1.5
│   │ ├─┬ is-builtin-module@1.0.0
│   │ │ └── builtin-modules@1.1.1
│   │ ├── semver@5.3.0
│   │ └─┬ validate-npm-package-license@3.0.1
│   │   ├─┬ spdx-correct@1.0.2
│   │   │ └── spdx-license-ids@1.2.2
│   │   └── spdx-expression-parse@1.0.4
│   ├── object-assign@4.1.0
│   ├─┬ read-pkg-up@1.0.1
│   │ ├─┬ find-up@1.1.2
│   │ │ ├── path-exists@2.1.0
│   │ │ └─┬ pinkie-promise@2.0.1
│   │ │   └── pinkie@2.0.4
│   │ └─┬ read-pkg@1.1.0
│   │   ├─┬ load-json-file@1.1.0
│   │   │ ├── graceful-fs@4.1.9
│   │   │ ├─┬ parse-json@2.2.0
│   │   │ │ └─┬ error-ex@1.3.0
│   │   │ │   └── is-arrayish@0.2.1
│   │   │ ├── pify@2.3.0
│   │   │ ├─┬ pinkie-promise@2.0.1
│   │   │ │ └── pinkie@2.0.4
│   │   │ └─┬ strip-bom@2.0.0
│   │   │   └── is-utf8@0.2.1
│   │   └─┬ path-type@1.1.0
│   │     ├── graceful-fs@4.1.9
│   │     ├── pify@2.3.0
│   │     └─┬ pinkie-promise@2.0.1
│   │       └── pinkie@2.0.4
│   ├─┬ redent@1.0.0
│   │ ├─┬ indent-string@2.1.0
│   │ │ └─┬ repeating@2.0.1
│   │ │   └─┬ is-finite@1.0.2
│   │ │     └── number-is-nan@1.0.1
│   │ └── strip-indent@1.0.1
│   └── trim-newlines@1.0.0
├─┬ fancy-log@1.2.0
│ └── time-stamp@1.0.1
├─┬ gulplog@1.0.0
│ └─┬ glogg@1.0.0
│   └── sparkles@1.0.0
├─┬ has-gulplog@0.1.0
│ └── sparkles@1.0.0
├── lodash._reescape@3.0.0
├── lodash._reevaluate@3.0.0
├── lodash._reinterpolate@3.0.0
├─┬ lodash.template@3.6.2
│ ├── lodash._basecopy@3.0.1
│ ├── lodash._basetostring@3.0.1
│ ├── lodash._basevalues@3.0.0
│ ├── lodash._isiterateecall@3.0.9
│ ├─┬ lodash.escape@3.2.0
│ │ └── lodash._root@3.0.1
│ ├─┬ lodash.keys@3.1.2
│ │ ├── lodash._getnative@3.9.1
│ │ ├── lodash.isarguments@3.1.0
│ │ └── lodash.isarray@3.0.4
│ ├── lodash.restparam@3.6.1
│ └── lodash.templatesettings@3.1.1
├── minimist@1.2.0
├─┬ multipipe@0.1.2
│ └─┬ duplexer2@0.0.2
│   └─┬ readable-stream@1.1.14
│     ├── core-util-is@1.0.2
│     ├── inherits@2.0.3
│     ├── isarray@0.0.1
│     └── string_decoder@0.10.31
├── object-assign@3.0.0
├── replace-ext@0.0.1
├─┬ through2@2.0.1
│ ├─┬ readable-stream@2.0.6
│ │ ├── core-util-is@1.0.2
│ │ ├── inherits@2.0.3
│ │ ├── isarray@1.0.0
│ │ ├── process-nextick-args@1.0.7
│ │ ├── string_decoder@0.10.31
│ │ └── util-deprecate@1.0.2
│ └── xtend@4.0.1
└─┬ vinyl@0.5.3
  ├── clone@1.0.2
  └── clone-stats@0.0.1

И вот, каждый новичок во фронтенде читая очередную статью, где ему пишут о том, как клёво работает gulp-util, ставит его и всё это дерево зависимостей.

Тут, конечно, стоит оговорить вот что. gulp-util включён в зависимости самого Галпа до 4 версии. И как бы не хотелось, если использовать версии 3−, то не отвертеться от этого плагина. Однако, оправдывает ли это тот факт, что в самом gulp-util есть куски кода, которые проверяют свои же зависимости с помощью сторонних плагинов (см. lib/log.js)? Оправдывает ли это тот факт, что большая часть плагинов-зависимостей — это сниппеты на 20-30 строк, которые решают небольшую прикладную задачу, которую автор не захотел решить самостоятельно?

Не думаю.

А вообще, всё это напоминает ситуацию 3-7-летней давности, когда все подключали jQuery с CDN, потому что «Можно и без неё, но мне тут селекторы выбрать нужно, а jQuery всё равно у всех уже в кэше лежит.. а ещё можно и Modernizr, он же ж тоже наверное у всех есть. На скорость не повлияет». А, нет, влияет.

Вроде бы все такие прогрессивные вокруг. Подвороты, модные бороды. А подходы везде одни и те же. Вместо того, чтобы менять подходы, пишем с помощью них всё новые и новые библиотеки.

2016
Популярное