ビルドの仕方
ここではソースから実際に見るhtmlへと変換する(ビルドする)ための手順を 解説します。
ビルドとは
最近のJavascript、つまりは ECMAScript のことですが、 以下のような手順を踏んで最終的に見るべきコンテンツが生成されるようです。 この手順をビルドと私はとりあえず呼んでいます。
- ライブラリをたくさんローカルにインストールする
- 複数のスクリプトを書く
- スクリプトからスクリプトを呼びだしたりする
- htmlファイルから呼びだすスクリプトを1つにまとめる
- htmlファイルを書く
- ???
- PROFIT
複数のスクリプトを1つにまとめるためのソフトを bundler と 呼んでいるようです。 bundlerがあるとスクリプトからスクリプトを呼びだすことが非常に簡単になります。
以下の説明は全てWindowsが前提です。
ビルドのやり方
同梱したreadme.mdにも書いてありますが
もう少し詳細に解説します。
全ての前提: node.jsとnpm
ライブラリをインストールしたりツールを動かしたりするために必要となるソフトがあります。 それが node.js です。
node.jsはJavascriptをコマンドラインで動かすためのnodeコマンドと、
Javascriptのライブラリをインストールするためのnpmコマンドが含まれています。
今回はnodeコマンドを直接には使いませんが、
npmだけは各種ライブラリをインストールするのに使います。
ダウンロードページは英語ですが気合でインストールしてください。
気合が入ると(インストールされると)、nodeコマンドとnpmコマンドが使えるようになります。
以下のようにしてインストールされたことを確認できます。
先頭の>はコマンドプロンプトそれ自体の表示だと思ってください。
> node --version
> npm --version
他にコマンドラインで使うものをインストールする
他にコマンドラインから直接使いたいツールの1つは、 先に説明したbundlerの1つである Webpack です。 他にもbundlerはあるのですが(browserify)、 Webpackの方が現在は人気があるようなのでこちらを使います。
Webpackは現在ベータの Webpack2 系を使います。
管理者権限があるコマンドプロンプト上で次のコマンドを入力してください。
こうすることでwebpackコマンドが全体で使えるようになります。
> npm install -g webpack@^2.1.0-beta
他にインストールしておきたいツールはWebpackの関連ツールである webpack-dev-server です。 同梱のソースはFirefoxだとそのまま動くのですが、 Chromeのようなブラウザだと (FetchAPIがローカルからの読みこみをデフォルトでは許可してくれないので) 若干動かすのが面倒になります。
そこで役に立つのがwebpack-dev-serverです。 このツールは ローカルで簡単なHTTPサーバーを動かす ツールです。 これがあることでChromeのようなブラウザも サーバーからの読みこみとして解釈してくれるようになります。
インストール方法は以下の通りです。 やっぱり管理者権限のあるコマンドプロンプトで入力してください。
> npm install -g webpack-dev-server@^2.0.0-beta
ライブラリをプロジェクトディレクトリにインストールする
さて、ソースはどこかに展開されているでしょうか。
そのソースのディレクトリに移動して(cdして)、
コマンドプロンプトで次のコマンドを入力しましょう。
今度は 管理者権限ではない 通常のコマンドプロンプトで入力してください。
> npm install
このコマンドはディレクトリにあるpackage.jsonファイルを参照して、
node_modulesディレクトリに必要なライブラリ一式をインストールするための
コマンドです。
ライブラリ自体の数はそこそこなのですが、
依存するライブラリがかなり多いのでお茶でも飲みながらお待ちください。
ビルドする
ライブラリのインストールは終わったでしょうか。最後はビルドです。
次のコマンドを通常のコマンドプロンプトで入力すればビルドが始まります。 だいたい40秒くらいかかるのでのんびりお待ちください。
> webpack
これであとはcalc.htmlとtest.htmlを開けば目的のものが表示される…
???
はずでした。
先にも書きましたが、 Chromeを含む一部のブラウザはローカルからのファイル読みこみを デフォルトでは許可していません。 そのため、今回のような ローカルからFetchAPIを使って読みこみする 場合には Chromeでは正常に表示することができません。
そこで使うのが webpack-dev-server です。 このツールは先にも説明した通りローカルに小さな開発用Webサーバーを立ちあげるのですが、 他にも素晴らしいことに ホットリロード に対応しているのです。
ホットリロードとは何か。 ビルドには直接関係ないのですが、今回の例で言うとそれは ファイルを変更して保存すると自動的にビルドして画面をリロードする仕組み です。
では実際に実行してみましょう。プロジェクトのルートディレクトリで以下のコマンドを実行してください。
> webpack-dev-server
このコマンドはデフォルトだとlocalhost:8080にサーバーを立ちあげます。
次のように色々表示された最後にwebpack: bundle is now VALIDと表示されたら、
http://localhost:8080/calc.htmlを開いてみてください。
PROFIT!
このようにChromeで表示できました。 無事ここまで出来たのなら、おめでとうございます!