Установка и настройка Babel.
Для работы с ES6 нам нужно установить Babel и сделать некоторые настройки.
Для этого нужно установить последнюю стабильную версию Node.js и NPM.
Если у вас они не установлены, то вы сможете сделать это с официальных сайтов, перейдя по ссылкам выше.
Установка очень простая и я на ней останавливаться не буду.
После установки Node.js вы сможете проверить версию набрав в КС (командная строка - здесь и далее)
node -v
npm -v
- для версии NPM.
Создадим рабочую папку из КС - в нужной директории
mkdir Имя_Папки_проекта
Для перехода в папку (директорию).
cd Имя_папки_(или_директории)
Или можно просто перетащить нужную папку прямо в КС и нажать Enter, таким образом получить путь и перейти к нужной папке.
Переходим в созаную папку.
Теперь нам нужно инициализировать NPM.
В КС набираем:
npm init -y
В нашем случае
-y обозначает,
что мы принимаем все параметры по умолчанию (Yes).
В папке вашего проекта после этого появится файл package.json В этом файле содержится информация необходимая для работы NPM.
Вернемся к Babel
Babel предназначен для траспиляции кода. Транспиляция - это перевод кода с одного языка на другой. В нашем случае с ES6 на ES5. После этого мы сможем использовать код в любом современном браузере.
Babel можно использовать с другими инструментами и фреймворками. На сайте Babel есть подробная инструкция.
Пройдя по этой ссылке Using Babel мы сможем с вами выбрать нужную нам конфигурацию. Так как у нас есть Node.js, NPM и мы собираемся использовать CLI , то наша команда сформируется так
npm install babel-cli babel-core babel-preset-es2015 --save-dev
cli - comande line interface Интерфейс командной строки - позволит использовать команду babel в самой КС, как NPM.
babel-core - основой модуль Babel.
babel-preset-es2015 - модуль еобходимый для транспиляции ES6.
--save-dev добавит модули в package.json в раздел devDependencies,
в которм указываются модули необходимые для разработки.
После установки в папке проекта появится папка node_modules.
В этой папке содержатся папки модулей, которые мы устаовили. Также эти модули добавились в наш файл package.json в раздел
devDependencies.
В папке проекта создадим папку src Source-Источник - для исходного кода. и папку dist Distribution -распространиение.- конечный код.
index.html - (так же в корне папки проекта) файл с помощью которого мы будем проверять работоспособность кода.
В этом файле обычная разметка с тегом
script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script></script>
</body>
</html>
Проверить Babel
В папке src создадим файл script.js.Внутри файла мы попробуем одно из нововедений ES6
let variable = "Item";
let - ключевое слово, которе позволяет объявлять локальные переменные.
Теперь нам нужно перевести (транспилировать) ES6 в ES5.
Для этого в файле package.json в разделе
scripts
удаляем скрпт-тест ("test": "echo \"Error: no test specified\" && exit 1")
вставим следующее -
"build": "babel src -d dist --presets es2015"
Это мы написали скрипт, который будет брасть исходный код из папки src.
-d - указывает куда поместить измененный код - dist.
--presets es2015 - указывает что мы транспилируем код ES 6.
Сохраняем
В КС
npm run build
Этой командой мы можем запускать скрипты, которые мы указываем в файле package.json
Нажимаем Enter Запустится скрипт и когда он завершится в папке dist
Появится файл script.js вот с таким содержимым:
"use strict";
var variable = "Item";
Как вы видете слово
let заменено на var
и значит все транспилировалось и можно использовать код на странице.
Для того, чтобы каждый раз не вводить команду
npm run build
Мы добавим еще один скрипт в файл package.json
"watch": "babel src -d dist --presets es2015 -w"
-w означает, что теперь Babel будет смотрет за файлами в папке src.
И как тоько будут изменения в файлах или вообще в папке src (например - создание нового файла)
то тут же все автоматически отразится уже готовым кодом в папке dist.
package.json
{
"name": "ES-6-new",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src -d dist --presets es2015",
"watch": "babel src -d dist --presets es2015 -w"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1"
}
}
Здесь файл
Теперь запускаем команду в КС:
npm run watch
И теперь запишем в наш файл script.js в папке src
let say = "Hello";
Сохраним.
И в файле script.js в папке dist отразятся наши изменения:
var say = "Hello";
Остановить слежение - Ctrl + C и Y если остановить или N - если продолжить.
См картинку ниже:
Таким простым способом мы настроили транспилцию кода в режиме реального времени, таким образом, чтобы любой браузер смог прочитать JS- код написанный по новым стандартам.
Теперь самое время перейти к более серьезному изучению JS стандарта ES6.
Довольно доходчиво. Спасибо.
ОтветитьУдалить