Babel、Browserify のクイックスタート2017年夏版

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 で標準化されたクラスを試してみましょう。

app.js

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