babel で javascript をトランスパイルする

babel7 を使用して、javascript をトランスパイルします。

babel

babel は ECMAScript2015以降のコードを 古いブラウザでも動作する javascript のコードに変換してくれるトランスパイラです 。

導入

npm でインストールします。

babel7 から プリセットが、babel-preset-es2015 babel-preset-es2016 などの指定から @babel/preset-env のスマートプリセットになっています。

@babel/polyfill で polyfill を追加します。

設定

設定ファイルは babel.config.js または .babelrc で設定します。

両方併用することもできるようです。

babel.config.js

IE11 をターゲットにする場合

useBuiltIns オプションで必要な pollyfill だけ含めることができます。

.babelrc を作成してタスクを設定します。

ブラウザーの市場シェアが0.25%を超えるユーザーに必要なポリフィルとコード変換のみを含める場合

実行

babel を実行します。

下記は、src ディレクトリの a.js を、js ディレクトリに出力します。

まとめ

今回は、コマンドラインで実行してみましたが、実用的には webpack などと併せることが多いかと思います。その際は、webpack の設定に babel を実行する設定を追加することになります。また、設定ファイルは2つ(プロジェクト全体の構成、ファイル相対構成)あり、どちらかの設定でも、あるいは併用でも使えるそうです。babel 自身は babel.config.js を使用しており、おすすめとのことです。

参考

公式:Babel

設定ファイル:Config Files · Babel

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA