Привет. Нужно понять, как писать этот чёртов плагин для Babel? Завари чайку или кофе и устраивайся поудобнее, начинаем…
Для начала инициализируем npm
npm init
Отвечаем на вопросы «enter»
Теперь устанавливаем babel
npm install babel-cli babel-core babel-preset-es2015
babel-cli — интерфейс для работы с babel из консоли.
babel-core — самая главная штука в babel.
babel-presets-es2015 — это модуль для транспиляции в ES5.
Теперь создадим два каталога src — файлы которые будем преобразовывать и dist — куда будем преобразовывать.
В src сделаем файлик some.js (имя на свой вкус и цвет) и напишем в нём код.
const str = "something!";
Скажем babel в package.json что делать с кодом.
"scripts": {
"build": "babel src -d dist --presets es2015"
},
В консоли запускаем
npm run build
Теперь откроем dist и заглянем в файл (в моём случае some.js).
Если шумеры не навели на вас проклятия то получится такая штука
"use strict";
var str = "something!";
Такс, отлично, скажешь ты, а что дальше? А дальше вынесем наши настройки в отдельный файлик .babelrc
Он нужен чтобы конфигурировать наш babel. В нём будет следующий код
{
"presets": ["es2015"]
}
А в package.json уберём --presets es2015
"scripts": {
"build": "babel src -d dist"
},
Для нашего плагина создадим папку utils, а там сделаем файлик test.js. Вжух, код появись.
module.exports = function(babel) {
return {
visitor: {
VariableDeclaration: function(path) {
path.node.kind = "let"
}
}
}
}
Вернёмся в наш .babelrc. Уберём, что было и напишем…
{
"plugins": ["./utils/test.js"]
}
Делается для того, что бы не мешался ES5. Давай те теперь посмотрим, что произошло?
npm run build
Немного чёрной магии и вот что мы имеем
let str = "something!";
Если всё хорошо, то могу тебя поздравить, а теперь заглянем в теорию и можешь идти в бой.
А что там происходит? Babel перебирает весь код а потом транслирует его в зависимости от настроек. Сам наш код похож на дерево, если по пацански то AST (Абстрактное синтаксическое дерево), а так же умные люди написали крутую штуку, что бы именно Ты смог(ла) посмотреть на своё дерево. По самому дереву гуляет визитёр, и посещает узлы (nodes). По древу ты смотришь, из каких узлов состоит твой код и к чему тебе нужно обращаться, чтобы решить свою проблему.
На секунду вернёмся к нашему коду.
VariableDeclaration — мы говорим визитёру, что нам нужен узел VariableDeclaration, он бежит на этот узел и с ним работает.
На этом всё, пойду заварю ещё чайку…
P.S. В следующей части напишем плагин, который переделывает функцию ES5, в стиль ES7.
Ссылки, литература и прочее.
Работа с деревом в реальном времени
Документашка для написания плагинов, must read!
Github урока
Автор: Командир судна
