今更ですが、ES6の勉強を始めました。
備忘録として、環境構築方法や用語などをメモしていきます。
手始めに、Babel単体での環境を作ります。
Babel単体での利用
前提として、node.jsがグローバルインストールされている状態を想定
- 適当なディレクトリを用意
$ mkdir babel_test/cap1
$ cd babel_test/cap1
- Babelをグローバルインストール
$ npm i -g babel
- package.jsonを作成
$ npm initで対話的に下記のようなファイルを作成しました↓
package.json
{
"name": "babel-test-built-ins",
"version": "1.0.0",
"description": "hoge",
"repository": "piyo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
ミスって、descriptionとかrepositoryが空になっちゃっても
sudo vi package.jsonで編集出来ます。
（自分の環境だとread-onlyなpackage.jsonが生成されました）
-
Babelのコマンドラインツールをインストール
$ npm i -D babel-cli
- es2015のトランスパイル用プラグインをインストール
```terminal
$ npm i -D babel-preset-es2015
- .babelrcを作成
$ touch .babelrc
$ echo '{ "presets": ["es2015"] }' > .babelrc
- コンパイル元のファイルを作成
デフォルトパラメータとアローファンクションを利用。
src/sample_es6.js
setTimeout((hoge = "ほげ") => {
console.log(hoge);
}, 500);
- コンパイルする
$ pwd # -> ~/babel_test/cap1
$ babel src/sample_es6.js -o dest/sample.js
- 一応、コンパイル結果
'use strict';
setTimeout(function () {
var hoge = 'ほげ';
console.log(hoge);
}, 500);
- ディレクトリを一括指定してコンパイルする事も可能
$ babel src -d lib
もしくは、下記を追記して↓
package.json
{
...略...
"scripts": {
"build": "babel src -d dest"
},
}
$ npm run build
- watchも出来るよ٩( ‘ω’ )و
package.json
{
...略...
"scripts": {
"build": "babel src -d dest",
"start": "babel -w src -d dest"
}
}
$ npm run start
(背景がスケスケなのはお気になさらず)
捕捉
npm -i: installのショートカット
npm -D: --save-dev
babel -o:--out-file
babel -d:--out-dir
babel -w:--watch