About me

おしながき

発表の対象者

• BabelのTranspileの仕組みを理解したい方

話すこと

• Babelの概要
• 自作Pluginで、Transpileの過程を見てみる (Demo)

話さないこと

• Babelの個々のパッケージの説明
• Babelの設定

Babel is a JavaScript compiler

What is Babel? · Babel

• ES.nextなどのコードを、ES5などのコードに変換できるCompiler
• 高級言語間での変換であるため、Transpilerとも呼ばれる

図にするとこんな感じ

Transpileについて詳しく見ていく

• TransformがしやすいようにInputを解析して、AST(Abstract Syntax Tree)にする
• 主な関連パッケージ: @babel/parser

• ASTを走査して、Outputとして欲しい状態に変換する
• 主な関連パッケージ: @babel/traverse
• Plugin(e.g. babel-plugin-transform-*)は、この処理をしている

• ASTをJSのコードとして生成する
• 主な関連パッケージ: @babel/generator

• Demoのコードは、yinm/tiny-babel-plugin
• 変数名を foo → bar にTranspileする単純なPlugin
• Transpileの過程をわかりやすくするために、Pluginではないversionも用意した

• BabelはTranspilerである
• 変換処理では、以下の処理が行われている
  • Parse
  • Transform (Plugin)
  • Generate
• 自作Pluginを使って、Transpileの過程を確認した