Page 52 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

Транском п и ляторы

На момент написания книги двумя наиболее популярными транскомпиляторами
были ВаЬе/ и T r aceur. Я использовал оба, и они показали себя весьма удобными и ра­
ботоспособными. В настоящее время я более склоняюсь к Babel, и в этой книге мы
будем использовать этот транскомпилятор. Итак, приступим!
Изначально Babel задуман как транскомпилятор из ESS в ЕSб, но впоследствии
развился в универсальный транскомпилятор, способный осуществлять множество
разных преобразований, включая ЕSб, React и даже ES7. Начиная с Babel версии 6
преобразования больше не включаются в Babel. Для выполнения нашего преобра­
зования из ESS в ЕSб необходимо установить преобразование ЕSб и настроить Babel
так, чтобы использовать его. Мы делаем эти настройки локальными для нашего про­
екта, поскольку вполне вероятно, что мы будем использовать ЕSб в одном проекте,
React - в другом, а ES7 (или некий другой вариант) - в третьем. Сначала мы уста­
1
новим набор ЕSб (он же ES20 5 ).
$ npm install --save-dev baЬel-preset-es2015

e
Затем мы создадим в корневом каталоге нашего проекта файл . b ab l r c (предва­
ряющая точка означает, что обычно файл должен быть скрытым). Содержимое этого
файла таково.
t
"prese s " : [ " es2 0 1 5 " ] }
При наличии этого файла в проекте Babel сразу понимает, что вы используете ЕSб.

Запуск Babel с G u l p

м
Т е перь ы можем использовать Gulp фактически: давайте преобразуем код ЕSб,
который мы напишем, в переносимый код ESS. Мы преобразуем весь код в каталогах
е s б и puЬ i c / e s б в код ESS, располагаемый в каталогах dist и puЫic/dist. Мы ис­
l
пользуем пакет gulp-babel, поэтому начнем с его установки командой npm insta l
l
i
--save-dev gulp-babel. Затем отредактируем файл gulpf l e . j s.
p
const gulp = require ( ' g ul ' ) ;
const babel = require ( ' gulp-babel ' ) ;
p
gul . task ( ' default ' , function ( )
/ / исходный код для Node
gulp . s rc ( " e s б / * * / * . j s " )
. p ipe (babel ( ) )
. p ipe ( g ulp . dest ( " dist " ) ) ;
/ / исходный код для браузера
gulp . s rc ( "puЫic/esб/ * * / * . j s " )
. p ipe (babel ( ) )
t
p
. p ipe ( g ul . d est ( "puЫic/dis " ) ) ;
} ) ;
50 Глава 2. Инструменты разработки JavaScript