Abr@X@bra.ru
Курс по ES6 #1. Установка и настройка Babel
Курс по ES6 #1. Установка и настройка Babel

Курс по ES6 #1. Установка и настройка Babel

11.04.2017
906

ES6 теперь является официальным стандартом. Но большинство современных браузеров на данный момент, не поддерживает все нововведения ES6. Да и многие те, что поддерживаются требуют определенной настройки. Именно поэтому мы будем использовать Babel.  

Babel

Babel – предназначен для транспиляции кода. Транспиляция, это перевод исходного кода с одного языка на другой. То есть  мы будем переводить код написанный на ES6 в код ES5. После чего, мы сможем использовать код в любом современном браузере.

Babel, можно использовать вместе с другими инструментами и фреймворками. И на сайте Babel имеется подробная инструкция, также есть много информации по ES6.

Node.js и npm

Для работы с Babel, нам понадобится, Node.js и npm. Если у вас не установлен Node.js, тогда переходим на сайт Node.js, я рекомендую выбирать стабильную версию на данный момент. Скачиваем установщик и устанавливаем, следуя шагам установки.

Проверить правильно ли установлена Node.js, можно через командную строку. Нужно ввести команду – node -v и увидим установленную версию Node.js.

Давайте проверим какая версия у npm. Для этого вводим команду – npm -v.

Я создам папку ES6 – это та папка в которой мы будем работать. Также я открою редактор. И открою данную папку в редакторе.

Далее нам необходимо инициализировать npm. То есть подготовить его к работе. Для этого необходимо открыть папку в командной строке. Вводим команду - npm init -y, дифис y означает, что мы принимаем все параметры по умолчанию.

После инициализации в папке проекта появится новый файл - package.json. В этом файле содержится вся необходимая информация для работы npm.

Далее установим сам Babel и все, что ему нужно. В командной строке напишим - install babel-cli babel-core babel-presets-es2015 --save-dev и нажмем Enter. Пока идет установка я объясню, что мы устанавливаем.  

babel-cli – означает, интерфейс командной строки. Который позволит использовать команду Babel в самой командной строке. Точно также как мы используем команду npm.  

babel-core – это основной модуль Babel.

babel-presets-es2015 – это модуль необходимый для транспиляции ES6.

--save-dev – Добавить модули в файл package.json

После установки в проекте появится папка под названием - node_modules. В этой папке содержатся файлы и модули которые мы установили. Также эти модули добавились в файл package.json, в раздел - devDependencies.

Раздел - devDependencies – предназначен для тех модулей которые нужны для разработки данного проекта.

Далее я создам папку - src. В которой будет находится исходный код.

Также я создам папку - dist. В которой будет находится конечный код.

Также я создам файл index.html, с помощью которого мы будем проверять работоспособность кода. На странице кроме тега скрипт, ничего не будет.


Теперь давайте проверим Babel. Для этого в папке srs я создам файл - script.js. Внутри файла я попробую одно из нововведений  ES6.

Ключевое слово - let. Которое позволяет объявлять локальные переменные. О let мы поговорим в следующем посте на данную тему. Пока я просто объявляю переменную с помощью let вместо var.

let name = 'abraxabra';

На данный момент не все браузеры понимают let. И теперь нам нужно перевести код в ES5. Для этого в файле package.json в разделе scripts, я удалю скрипт test и ставлю следующие.


Мы только, что написали скрипт, который называется build. Данный скрипт использует команду Babel. Далее мы указываем папку src в которой находится исходный код. - d указывает куда поместить конечный код, а именно в папку dist. Presets - указывает, что мы транспилируем код ES6.

Сохраним файл и в командной строке напишим - npm run build. С помощью команды npm run, мы можем запускать скрипты которые указываем в файле package.json. Жмем Enter, запустится скрипт. И когда он завершился в папке dist появится файл script.js в котором слово let будет заменено на var.  

var name = 'abraxabra';

Теперь мы можем использовать этот файл на странице.

Программиста люди ленивые, поэтому чтобы каждый раз не вводить команду - npm run bild, мы добавим еще один скрипт в файл package.json. И назовем его watch.  Он точно такой же как и предыдущий только в конце добавим -w.


-w – означает, что теперь Babel будет смотреть за файлами в папке src. Как только мы изменим какой нибудь файл в этой папке, сработает скрипт и создаст свежие файлы в папке  dist, давайте попробуем.

Пишем - npm run watch и жмем Enter. И теперь Babel следит за нашими файлами. Если я объявлю еще одну переменную.

let greeting = 'Hello';  

Сохраняем и видим, что в папке dist в файле script.js произошли автоматические изменения.

var greeting = 'Hello';

Теперь мы готовы приступить к изучению ES6.

В следующем посте познакомлю вас с новым ключевым словам let. Которое позволяет объявлять локальные переменные с ограниченной области видимости.


Javascript, Babel
Читайте также:
Курс по ES6 #0. Пилотный выпуск. Вступление

Курс по ES6 #0. Пилотный выпуск. Вступление

ECMAScript 2015 или ES6 летом 2015 был принят как официальный стандарт, и является самым крупным обновлением языка за по...
Читать
Курс по React JS #2. Средства разработчика

Курс по React JS #2. Средства разработчика

Продолжаем изучать React JS. В этом посте я расскажу как установить и настроить средства разработчика, чтобы процесс...
Читать
Курс по React JS #1. Пилотный выпуск. Привет React!

Курс по React JS #1. Пилотный выпуск. Привет React!

В этом посте расскажу как написать первое простое приложение на React js.
Читать
Источник: codedojo