jtk

Babel ターミナルで常時監視する(mac)

f:id:jotaki:20181228215115p:plain

Babel のインストール

プロジェクトフォルダに移動して、

$ npm install -g babel-cli

babel-cli は Babel をコマンドから操作するためのツール

$ npm install --save-dev babel-preset-es2015

babel-preset-es2015 は ES2015 のコードをトランスコンパイルするためのプラグイン

コードのトランスコンパイルと実行

$ babel -w assets/es6.js -o assets/es5.js --presets es2015

この場合、assets/es6.js (ES6)を assets/es5.js(ES5)へトランスコンパイル
-wオプションで常時監視

Polyfill ライブラリの有効化

babel コマンドが変換対象とするのは、class/export などの ES6 の新文法が中心。
Map/Set などの新しい組み込みオブジェクト/メソッドを旧来のブラウザで利用するには Polyfill ライブラリを有効化する必要がある。

$ npm install --save babel-polyfill

でライブラリのインストール。
<script src"node_modules⁩/babel-polyfill⁩/dist⁩/polyfill.min.js">を読み込み