Понимание AST путем создания собственного плагина Babel

 AssignmentExpressions

Наш обработчик для MemberExpressionvar a = 3CallExpression Затем мы заменяем его новым assoc

Как и раньше, мы также должны обрабатывать случаи, когда используется IdentifierStringLiteral

Теперь создайте еще один контрольный пример и запустите код, чтобы увидеть, работает ли он:

 echo -e "foo.bar = 3;" >> test/case.ms
node run.js test/case.ms

$ mori.assoc(foo, "bar", 3);

членство

Наконец, нам также придется переопределить собственный синтаксис для доступа к члену объекта.

 foo.bar;
// needs to become
mori.get(foo, 'bar');

Вот визуальное представление для двух AST.

Мы можем почти напрямую использовать свойства MemberExpressionIdentifier

 MemberExpression: function(path) {
  if(t.isAssignmentExpression(path.parent)) return;

  if(t.isIdentifier(path.node.property)) {
    path.node.property = t.stringLiteral(path.node.property.name);
  }

  path.replaceWith(
    t.callExpression(
      moriMethod('get'),
      [path.node.object, path.node.property]
    )
  );
}

Первое важное отличие, на которое следует обратить внимание, заключается в том, что мы покидаем функцию раньше, если родителем этого узла является выражение AssignmentExpression Это потому, что мы хотим, чтобы наш метод посетителя AssignmentExpression

Это выглядит хорошо, но если вы запустите этот код, вы фактически окажетесь с ошибкой переполнения стека. Это потому, что когда мы заменяем данное MemberExpressionfoo.barmori.get Затем Babel обходит этот новый узел и рекурсивно передает его обратно в наш метод посетителя.

Хм.

Чтобы обойти это, мы можем пометить возвращаемые значения из moriMethodMemberExpression

 function moriMethod(name) {
  var expr = t.memberExpression(
    t.identifier('mori'),
    t.identifier(name)
  );

  expr.isClean = true;
  return expr;
}

Как только он будет помечен, мы можем добавить еще одно предложение возврата в нашу функцию.

 MemberExpression: function(path) {
  if(path.node.isClean) return;
  if(t.isAssignmentExpression(path.parent)) return;

  // ...
}

Создайте последний контрольный пример и скомпилируйте код, чтобы убедиться, что он работает.

 echo -e "foo.bar" >> test/case.ms
node run.js test/case.ms

$ mori.get(foo, "bar");

Все хорошо, теперь у вас есть язык, который выглядит как JavaScript, но вместо этого имеет неизменные структуры данных по умолчанию, без ущерба для исходного выразительного синтаксиса.

Вывод

Это был довольно сложный пост, но мы рассмотрели все основы проектирования и создания плагина Babel, который можно использовать для преобразования файлов JavaScript полезным способом. Вы можете поиграть с MoriScript в REPL здесь и найти полный исходный код на GitHub .

Если вам интересно идти дальше и вы хотите узнать больше о плагинах Babel, ознакомьтесь с фантастическим руководством Babel и обратитесь к репозиторию babel-plugin-hello-world на GitHub. Или просто прочитайте исходный код любого из 700+ плагинов Babel уже на npm . Есть также генератор Yeoman для создания новых плагинов.

Надеюсь, эта статья вдохновила вас на создание плагина Babel! Но прежде чем вы приступите к реализации следующего замечательного языка для переноса, есть несколько основных правил, о которых нужно знать. Babel — это компилятор JavaScript-JavaScript. Это означает, что мы не можем реализовать такой язык, как CoffeeScript, как плагин Babel. Мы можем преобразовать только небольшой расширенный набор JavaScript, который может понять парсер Babel .

Вот идея для нового плагина, чтобы вы начали. Вы можете злоупотреблять побитовым | Оператор ИЛИ для создания функциональных конвейеров, как в F #, Elm и LiveScript.

 2 | double | square

// would become

square(double(2))

Или, например, внутри функции стрелки:

 const doubleAndSquare = x => x | double | square

// would become

const doubleAndSquare = x => square(double(x));

// then use babel-preset-es2015

var doubleAndSquare = function doubleAndSquare(x) {
  return square(double(x));
};

Как только вы понимаете правила, единственными ограничениями являются синтаксический анализатор и ваше воображение.

Вы сделали плагин Babel, которым хотите поделиться? Дай мне знать в комментариях.