С появлением частичной поддержки 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)
some_x
12.10.2015 16:50-3Что с того что Chrome 45 имеет поддержку es2015 если мы всё равно весь код компилируем в es5?
ShpuntiK
16.10.2015 08:31Если взять webpack, то можно выкинуть и SystemJS и Gulp.
Finom
16.10.2015 15:34-1А зачем мне их выбрасывать? Тем более, как правило, Гульп используется не только в качестве сборщика, но и как инструмент для удобного деплоя или запуска произвольных баш скриптов (например того же Jekyll). Плюс, я не могу найти информации о браузерной компиляции модулей вебпаком. Я не совсем понимаю, что вы мне хотите сказать вашим комментарием.
ShpuntiK
16.10.2015 16:55-1Смысл в том, что grunt/gulp совсем не нужны, когда есть npm scripts. Зачем завязываться на какие-то сторонние инструменты, когда есть дефолтные. Большинстве задач решается в одну строку в npm scripts. Предполагаю, что существуют варианты, когда grunt/gulp могут сделать что-то лучше, чем npm scripts, но пока не встречал.
Finom
16.10.2015 17:04Галп работает с потоками, например. Это и быстрее и экономнее (не нужно лишний раз обращаться к жесткому диску). Это во-первых. Во-вторых описывать более сложный «таск» в Галпе можно с помощью пары строк красивого кода (благо, у него есть сотни плагинов под любую задачу), а c npm scripts либо прийдется страшно гадить в package либо писать отдельный скрипт.
Delphinum
Возможно не в тему, но почему именно SystemJS?
Finom
Он умеет AMD, CJS и глобальные переменные. Плюс, у него прямо в документации сказано, что есть интеграция с Babel (в том числе и компиляция в браузере).
Delphinum
А кто сегодня это не умеет? )
То есть критична именно коробочность. Понял, спасибо.