Babelをざっくり理解する

この記事で扱うソースコードはこちらにもあります。 github.com

Babelとは

• JavaScriptのコンパイラーで、JavaScriptを下位互換するために使われる。
• JSX構文やTypeScriptも変換できる。(TypeScriptは一部サポートしていないらしいです。)

babeljs.io

なぜ必要なのか

• 使用できるJavaScriptはブラウザによって異なるから。
• 新しいJavaScriptを各ブラウザで使用できるようにするため。

JavaScript Engine

• JavaScriptのコードを実行するコンピュータプログラムの事。
• 新しい機能をブラウザで使用できるかはJavaScript Engine次第。
• JavaScript Engineはブラウザによって異なる。

ブラウザ	JavaScript Engine
Google Chrome	V8
Mozilla Firefox	SpiderMonkey
Safari	JavaScriptCore
Microsoft Edge	Chakra *V8に変更予定(2020/1/15)
Internet Explorer	Chakra

• ブラウザのバージョンによって使用できる機能に差がある。

ECMAScript

• JavaScriptの言語仕様の事。
• TC39という専門委員会でECMAScriptを策定してる。
• ES2015以降は仕様選定のプロセス*1が変更されて、1年に一度のペースでリリースされるようになっている。

Babelの機能

• 構文変換
• ターゲットブラウザにないPolyfillの提供
• ソースコードの変換

Babelを実行するために必要なもの

@babel/cli

• 実行コマンドを用意
• ファイルやディレクトリの判定を行なっており、内部的には@babel/coreに依存

@babel/core

• @babel/parser, @babel/traverse, @babel/generatorなどを使用して設定の読み込みや、コードの変換を行う

Babel Plugins

• コードに変換を加える(pluginは最後に実際に軽くふれています)

Babel Presets

• 独自のBabelのプラグインセット(@babel/preset-env, @babel/preset-react)

Don't want to assemble your own set of plugins? No problem! Presets can act as an array of Babel plugins or even a sharable options config.

Presets · Babelより引用

Babelの変換には3つの段階

Parsing

ソースコードをAST(Abstract Syntax Tree)に変換

Transformation

ASTを変換するBabelのプラグイン(@babel/plugin-transform-arrow-functions)

Code Generat

ASTをソースコードに変換

プラグイン

babelはプラグインを用いることで、JavaScriptのコードを変換できます。 今回は、プラグインを軽くさわってみました。

mkdir mydemo
cd mydemo

arrow-functions

npm install --save-dev @babel/core @babel/cli @babel/plugin-transform-arrow-functions

アロー関数を書きます。

const hoge = () => {};

babel.config.jsを作成

const plugins = ["@babel/plugin-transform-arrow-functions"];
module.exports = {plugins};

libというディレクトリの中に結果を出します。

npx babel index.js --out-dir lib

新しく作られたlibディレクトリの中のindex.jsを見てみると、おおー！アロー関数が普通の関数になりました。

const hoge = function () {};

block-scoping

npm install --save-dev @babel/plugin-transform-block-scoping

先ほどのindex.jsにブロックスコープを追加する

//arrow-functions
const hoge = () => {};

//block-scoping
{
    let a = 1;
}
let a = 1;

const plugins = [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-block-scoping"
];

module.exports = {plugins};

先ほどと同様にコンパイルする

npx babel index.js --out-dir lib

var hoge = function () {}; 

{
  var _a = 1;
}
var a = 1;

参考資料

Plugins · Babel

現代フロントエンドに欠かせないwebpackとBabelを理解しよう！ (sakito) - builderscon tokyo 2019

ECMAScript · JavaScript Primer #jsprimer

*1:詳細はここに書かれていますhttps://tc39.es/process-document/