ES2015の環境作成(Babel、watchify)


ES2015でJavaScriptを書こうと思い環境構築を始めましたが、
新旧情報があり何をすれば良いのかいまいちわからなかったので、
手順を残します。

2016/06/15時点の情報です。

npmはすでにインストール済みの状態で始めます。

1. workディレクトリを作成する。

$ mkdir work
$ cd work

2. npmで初期化する。

$ npm init
全部エンターで作成してみる。
変更したい所があれば随時変更する。
package.jsonが作成されます。

3. 必要なライブラリをインストールする。

$ npm install –save-dev watchify
$ npm install –save-dev babelify
$ npm install –save-dev exorcist
$ npm install –save-dev babel-preset-es2015

4. .babelrcを作成する。

$ vi .babelrc
下記の設定を記述する。
{
“presets”: [“es2015″]
}

5. watchifyを起動する設定を記述する。

毎回watchifyコマンドで起動してもよいのですが、
npmコマンドで簡単に起動できるように設定ファイルに記述します。

$ vi package.json
以下のwatchの記述を追加する。
scripts: {
test: echo \”Error: no test specified\” && exit 1,
“watch”: “watchify -t babelify ./index.js -o ‘exorcist ./build.js.map > ./dist/index.js’ -d”
}

出力用のディレクトリも作成しておきます。
$ mkdir dist

入力用のファイルを作成しておきます。中はからでもOKです。
$ touch index.js

入出力用のファイル、ディレクトリが無いとwatchify起動時にエラーになります。

6. watchifyを起動する

$ npm run watch

これでindex.jsを保存するたびにトランスパイルされたJavaScriptが生成されます。

以上です。


コメントを残す

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

CAPTCHA