Войти на сайт

Авторизация, ждите ...
×

ТЕМА: es6 в mv (с помощью grunt и babel)

es6 в mv (с помощью grunt и babel) 4 года 7 мес. назад #100490

  • Amphilohiy
  • Amphilohiy аватар
  • Вне сайта
  • Светлый дракон
  • Сообщений: 547
  • Спасибо получено: 665
  • ОраторУчитель2 место ГотвПрограммист RubyПобедитель Сбитой кодировки
Прошлый раз я вас дружил с глотком(gulp) кофейного сценария(coffeescript) тут. А сегодня у нас хрюкающий(grunt) галдеж(babel). Суть примерно та-же: грунт нам обеспечит сборку клиентской части, а бабель конвертнет es6 в es5. В надежде что вы впитали мудрость той статьи я сокращу эту.
Grunt
О том как ставить ноду смотрите по ссылке выше. Теперь же глобально ставим клиент грунта
npm install -g grunt-cli
И в папочке где устроите проект создайте тот же package.json
{
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-syntax-decorators": "^6.13.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.24.1",
    "grunt": "^1.0.1",
    "grunt-babel": "^7.0.0",
    "grunt-contrib-coffee": "^2.0.0",
    "grunt-contrib-watch": "^1.0.0"
  }
}
в ней же запустите команду
npm install
Теперь же сама настройка - делаем файл Gruntfile.coffee и записываем следующее
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

Эмм, да, грунт поддерживает кофе из коробки, так что я не упустил шанс. Сам по себе грунт своеобразен но суть как у gulp а. Дело в том, что каждый отдельный пакет требует набора настроек сразу. Например
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

тут мы настраиваем бабель. Но simpleBabel и decoratorBabel сами по себе уже являются тасками, и их можно запустить с помощью команды
grunt babel
или
grunt babel:simpleBabel
Сейчас будет ошибка, ибо бабель не настроен, но можно уже запускать кофеек. Естественно я вам сразу же подвез вотчеры, причем по умолчанию.
Как бы то ни было за полными манулами вам сюда.
Babel
Сам бабель тоже требует настройки. Для этого создадим фаил .babelrc
{
  "presets": ["es2015"],
  "plugins": ["syntax-decorators", "transform-decorators-legacy"]
}
Тут у нас пресет, конвертирующий es6 в es5, и плагины на декоратор, о котором позже. По сути эти настройки вы могли записать и в грунте. Но этого достаточно. Давайте попробуем сконвертировать скриптец (предупреждаю сразу - выхлоп будет большой). Сам скрипт(src/test_babel.js):
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

И выхлоп:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

Запущеный скрипт с ноды вывел:
LOG: hello
function
Создан экземпляр task!
23
Загружаем все tasks...
Создаём новый автомобиль
Создаём Porsche
Очень много функций, заменяющих сахар es6, но и с кофе такой есть. Тем не менее можно уже писать и не боятся, пока не посмотрите в выхлоп.
Спец гость - декоратор
Но перегонка между стандартами (или же просто поддержка нескольких выбранных версий разных браузеров, серьезно, если будет время поглядите что могет) не единственная фишка бабеля. Он так же позволяет подкинуть пару плагинов, которые внесут свою лепту в компиляцию, как например прикрутить декоратор. Синтаксически он будет выглядеть как в python:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

Маленький @logger теперь является декоратором.Небольшая модификация метода bar которая выводит на экран все входящие аргументы, и все выходящие. Вывод будет таким:
invoke with args:  1 2 3
result:  6
1 + 2 + 3: 6
Выхлоп:
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

Как бы то ни было, можно ознакомиться с плагинами на сайте бабеля (доки к ним ни о чем, сложно понять что каждый из них делает), и писать не только на es6, но и подвезти разных других плюшечек.
Внезапная находка
Есть способ вытащить все хелпер методы в отдельный фаил. Надо прогнать установку следующих пакетов
npm install babel-cli --save
npm install babel-plugin-external-helpers --save
Затем запустить команду
./node_modules/.bin/babel-external-helpers > helpers.js
Чутка подрихтуем babelrc
{
  "presets": ["es2015"],
  "plugins": ["external-helpers", "syntax-decorators", "transform-decorators-legacy"]
}
И соберем файлик заново. Декораторам это не помогло, зато шоукейс es6 вышел поприрятнее
ВНИМАНИЕ: Спойлер! [ Нажмите, чтобы развернуть ]

чтобы проверить это на ноде надо добавить сверху строчку с загрузкой хелперов
require('../helpers.js')
И вуаля, работает. Правда 550 строчек внешних хелперов (в файле helpers.js)... Можете засунуть себе в ядро (никакого подтекста).
Я верю, что иногда компьютер сбоит, и он выдает неожиданные результаты, но остальные 100% случаев это чья-то криворукость.
Последнее редактирование: 4 года 7 мес. назад от Amphilohiy.
Администратор запретил публиковать записи гостям.
За этот пост поблагодарили: DK, Cabbit, Rude, akito66
Время создания страницы: 0.909 секунд