Быстро, бесплатно и без СМС, плагин для Babel JS

Привет. Нужно понять, как писать этот чёртов плагин для 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 урока