Дисклеймер: этот пост может показаться неинтересным для продвинутых JavaScript разработчиков. Он ориентирован на новичков, желающих освоить ECMAScript 2015+.

С появлением частичной поддержки ECMAScript 2015 в Chrome 45 и NodeJS 4, мы, веб разработчики, вступили в новую эпоху отрасли, которая нам приносит не только «хлеб с маслом», но и доставляет массу удовольствия. К сожалению, новый JavaScript не поддерживается всеми браузерами. Разработчику на помощь приходит Babel, который компилирует новый JavaScript в старомодный и поддерживаемый всеми браузерами (даже древними). На самом деле компиляторов ECMAScript.next в ECMAScript 5 больше чем один: Traceur, ES6 Transpiler и другие. Но Babel (бывший 6to5) является самым популярным и самым быстроразвивающимся компилятором, на сегодня.

Матрешка, в свою очередь (как же без неё, всё-таки это блог проекта Matreshka.js), — умеренно популярный фреймворк, иногда вызвающий вопрос «с чего начать» у новичков.

Решение — Matreshka.js ECMAScript.next boilerplate. Этот репозиторий убивает двух зайцев одним выстрелом: он содержит настроенный Gulp, SystemJS, а так же пример простых модулей, использующих Матрешку.

Репозиторий сделан для всех, не только для пользователей Матрешки. Если вы не желаете использовать этот фрефмворк, просто не импортируйте его и удалите сответствующие файлы из /src/lib/.

Пример максимально упрощен для того, чтоб новичек сосредоточился на реализации, исключительно, JavaScript кода. CSS препроцессор, browserify, jspm и другие вещи не включены, а библиотеки, которые вы желаете подключить, можно копировать напрямую в папку /src/lib/.

Что мы будем использовать?


  • Gulp — «запускатель задач».
  • SystemJS — универсальный загрузчик модулей (AMD, CJS, ES6).
  • Babel — компилятор JavaScript нового поколения в старый.
  • Matreshka — фреймворк, использующийся по умолчанию.


Как начать?


(вам потребуется работа в командной строке)
  • Установите Node.js 4+ и npm (npm, как правило, устанавливается автоматически вместе с установкой Node.js).
  • Установите Gulp глобально с помощью команды npm install --global gulp.
  • Скачайте или склонируйте репозиторий.
  • Внутри папки репозитория запустите команду npm install, которая подгружает зависимости, определенные в package.json.
  • Запустите команду gulp, чтобы убедиться, что всё прошло хорошо (папка /dist/ создана, а демо-приложения в /index.html и /dist/index.html выглядят одинаково).

Способ установки необходимого инструментария может отличаться в разных операционных системах, поэтому, если на каком-то этапе вы встретили проблему, прежде чем репортить в issues, попробуйте обратиться к Гуглу, Яндексу или DuckDuckGo.

Это всё, что нужно для установки окружения. Давайте писать код.

  • Измените приложение из репозитория.
  • Запустите gulp еще раз для компиляции ваших скриптов.

После того, как вы вызвали команду gulp, в качестве результата, вы получаете готовое к использованию приложение в папке /dist/, которое можно загрузить на сервер.

Процесс разработки


Есть два способа компиляции ECMAScript.next в старый ECMAScript 5.

Первый — это компиляция прямо в браузере. При каждой перезагрузке страницы, Babel/browser компилирует ES.next на лету. При небольшом количестве кода это удобно, но если количество модулей будет большим, вы можете обнаружить, что страница грузится медленно. Этот способ используется по умолчанию.

Второй способ — предварительная компиляция файлов. В этом случае придется прибегать к помощи командной строки, запуская gulp scripts:watch перед тем, как вы начнете менять файлы в папке /src/. При этом, все скомпилированные файлы попадут в папку /js/. Для того, чтоб воспользоваться этим способом разработки, нужно изменить файл /src/config.js, заменив все пути, начинаюшиеся с /src/ на те, что начинаются с /js/ (например, app: 'src/app' заменить на app: 'js/app') и удалить из конфига все упоминания Babel (убрать babelOptions и transpiler). Можно не заморачиваться с этими переименованиями: в папке /src/, кроме config.js есть файл config.precompiled-example.js, который можно переименовать в config.js (конечно же, удалив старый конфиг перед этим).

Структура проекта


/css/ — Файлы CSS.
/templates/ — Шаблоны, которые вы, возможно, заходите импортировать в приложении.
/img/ — Картинки, использующиеся в HTML и CSS.
/js/ — Скомпилированные в ECMAScript 5 несжатые JS файлы (папка в репозиторий не включена).
/src/ — Папка с исходным кодом приложения.
/src/app/ — Папка с приложением, которое вы разрабатываете.
/src/app/app.js — Стартовая точка вашего приложения.
/src/lib/ — Какие-нибудь библиотеки, которые вы желаете подключить в проект.
/src/config.js — Конфиг SystemJS.
/dist/ — Скомпилированное и готовое к использованию приложение, которое можно заливать на сервер и показывать клиенту (папка в репозиторий не включена).
/gulp.js — Файл Gulp.
/package.json — Метаданные для npm.
/index.html — Главный HTML файл.
/.gitignore — Список игнорируемых файлов и папок для Git.

Gulp tasks


gulp scripts — Компилирует файлы из /src/ в /js/. Вам не нужен этот таск, если вы используете браузерную компиляцию.
gulp scripts:watch — Слушает изменения в папке /src/ и запускает таск scripts для каждого измененного файла. При использовании браузерной компиляции, этот таск не нужен.
gulp scripts:build — Компилирует всё включенные в проект файлы в один минифицированный .js файл и кладет его в папку /dist/js/.
gulp html — Использует gulp-htmlprocessor для замены кусочка HTML, отвечающего за подключение скриптов, необходимых для процесса разработки, на подключение единственного минифицированного скрипта, находящегося в папке /dist/js/.
gulp default или просто gulp запускает таски scripts:build, html, копирует CSS файлы из /css/ в /dist/css/ и копирует содержимое папки /img/ в /dist/img/

На всякий случай, дублирую ссылку.

Всем добра.

Комментарии (12)


  1. Delphinum
    12.10.2015 16:30

    Возможно не в тему, но почему именно SystemJS?


    1. Finom
      12.10.2015 16:33

      Он умеет AMD, CJS и глобальные переменные. Плюс, у него прямо в документации сказано, что есть интеграция с Babel (в том числе и компиляция в браузере).


      1. Delphinum
        12.10.2015 16:42

        Он умеет AMD, CJS и глобальные переменные

        А кто сегодня это не умеет? )
        Плюс, у него прямо в документации сказано, что есть интеграция с Babel

        То есть критична именно коробочность. Понял, спасибо.


  1. Delphinum
    12.10.2015 16:42

    del


  1. some_x
    12.10.2015 16:50
    -3

    Что с того что Chrome 45 имеет поддержку es2015 если мы всё равно весь код компилируем в es5?


    1. Finom
      12.10.2015 20:03
      +3

      С того, что пора бы привыкать к новому JS.


      1. some_x
        17.10.2015 07:23
        -1

        Привыкать то может и пора, но это привыкание с chrome 45 как связано?


        1. Finom
          17.10.2015 12:10

          Хром и Нода — это первые, достаточно большие шаги, очевидно же.


  1. ShpuntiK
    16.10.2015 08:31

    Если взять webpack, то можно выкинуть и SystemJS и Gulp.


    1. Finom
      16.10.2015 15:34
      -1

      А зачем мне их выбрасывать? Тем более, как правило, Гульп используется не только в качестве сборщика, но и как инструмент для удобного деплоя или запуска произвольных баш скриптов (например того же Jekyll). Плюс, я не могу найти информации о браузерной компиляции модулей вебпаком. Я не совсем понимаю, что вы мне хотите сказать вашим комментарием.


      1. ShpuntiK
        16.10.2015 16:55
        -1

        Смысл в том, что grunt/gulp совсем не нужны, когда есть npm scripts. Зачем завязываться на какие-то сторонние инструменты, когда есть дефолтные. Большинстве задач решается в одну строку в npm scripts. Предполагаю, что существуют варианты, когда grunt/gulp могут сделать что-то лучше, чем npm scripts, но пока не встречал.


        1. Finom
          16.10.2015 17:04

          Галп работает с потоками, например. Это и быстрее и экономнее (не нужно лишний раз обращаться к жесткому диску). Это во-первых. Во-вторых описывать более сложный «таск» в Галпе можно с помощью пары строк красивого кода (благо, у него есть сотни плагинов под любую задачу), а c npm scripts либо прийдется страшно гадить в package либо писать отдельный скрипт.