Babel と Browserify の周辺ツールが2015年と比べてだいぶ変わってきたので、ドキュメントにまとめました。
NVS (Node Version Switcher)
複数の Node.js のバージョンを管理できるツールです。ChakraCore やナイトリービルドもインストールできます。Mac、Linux 版だけでなく Windows 版のインストーラーも配布されています。
Mac にインストールする場合、次のコマンドを実行しました。
export NVS_HOME="$HOME/.nvs"
git clone https://github.com/jasongin/nvs "$NVS_HOME"
. "$NVS_HOME/nvs.sh" install
インストールした後で $HOME/.profile に次のコードを追加しました。
export NVS_HOME="$HOME/.nvs"
. "$NVS_HOME/nvs.sh"
Node.js の最新バージョンをインストールしてみましょう。
nvs add latest
記事の作成時点で v8.1.4 がインストールされました。コマンドから使えるように宣言してみましょう。
nvs use node/8.1
バージョンを確認します。
node -v
Yarn
Yarn は Node.js のパッケージ管理ツールです。標準の npm よりもパッケージのダウンロード時間を短縮できます。各種 OS ごとにインストーラーが用意されています。MacOS の場合、homebrew でインストールできます。
brew install yarn
npx
npx は npm v5.2.0 で追加されたコマンドツールです。npm run のショートカットと考えればよいでしょう。npx がバンドルされていないのであれば、npm をアップグレードします。
npm i -g npm
試しに cowsay という牛のつぶやきを表示するプログラムを試してみましょう。
mkdir my-project
cd my-project
yarn add cowsay
牛の呟きを見てみましょう。
npx cowsay Hello
_______
< Hello >
-------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
ほかのツールの例は awesome-npx をご参照ください。
Babel CLI
Babel CLI は ES2015 以降の言語仕様をもとに書かれた JavaScript を古いブラウザーが解釈できるバージョンにトランスパイルした結果を表示します。yarn でインストールしましょう。
yarn add --dev babel-cli
プロジェクトごとに Babel のバージョンや設定が異なるので、babel コマンドをグローバルでインストールすることは推奨されません。
変換対象となるプログラムを解析するためにはプリセットと呼ばれる無数のライブラリを別に導入します。ES2015、ES2016、ES2017 対応のプリセットをまとめて扱うために babel-preset-env をインストールします。
yarn add --dev babel-preset-env
babel-preset-env は設定ファイルで対象となるブラウザーや Node.js のバージョンを指定することで、トランスパイルの処理を最小限に抑えます。設定ファイルを何も指定しなければ babel-preset-latest と同じふるまいになります。
ES2015 で標準化されたクラスを試してみましょう。
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}
トランスパイルした結果をターミナルに表示させてみましょう。
npx babel --presets env app.js
babili
babili (babel-minify) は Babel のための圧縮ツールです。プリセットを導入してみましょう。
yarn add --dev babel-preset-babili
先ほどのコードを圧縮して結果をターミナルで表示させてみましょう。
npx babel --presets=env,babili app.js
babel-node
babel-node は Babel でトランスパイルした結果のコードを実行します。
npx babel-node --presets=env app.js
browserify
browserify は Node.js で動かすことを前提としたソースコードをブラウザー対応版に変換するプログラムです。Babel を組み込むには babelify を一緒にインストールします。
yarn add --dev browserify babelify
実際に変換してみましょう。
npx browserify app.js -o bundle.js -t [ babelify --presets [ env babili ] ]
watchify
ソースファイルを監視して修正されたら自動的に変換ファイルを生成するように watchify を導入してみましょう。
yarn add --dev watchify
watchify の実行は次のとおりです。
npx watchify -v -d app.js -o bundle.js -t [ babelify --presets [ env babili ] ]
http-server
生成したスクリプトを利用する HTTP サーバーを導入してみましょう。
yarn add http-sever
HTTP サーバーを起動させてみましょう。
npx http-server -p 3000