Дисклеймер: этот пост может показаться неинтересным для продвинутых 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/

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

Всем добра.