#この記事を書こうと思ったワケ
「vue.jsに詳しくなろうの会」の輪読成果物です。
わからないことや指摘など意見をいただけると嬉しいです。
今回はインストールについて、理解したこと＋理解するために学び直した内容をざっとまとめました。もし誤りなどございましたら、ご指摘頂けますと幸いです。
※書かれたものの全てを要約したわけではありません。
#インストール
##ビルドについて詳しく
「さまざまなビルドについて」とあるけど、そもそもビルドって何だったっけ？
ソフトウェアのビルド（英: build）は、プログラミング言語で書かれたソースコードファイルや各種リソースファイルを独立したソフトウェア生成物に変換するコンピュータ上で実行されるプロセス、またはその結果を指す。
ビルドの最終生成物はバイナリ形式の実行ファイルであったり、再利用可能なライブラリであったり、バイトコードあるいはそれらをまとめたアーカイブであったりすることもある。
###「ビルド」の基本的な流れ
※以下はC言語を基に書いていますが、言語によってはその機能が存在しないものもある。じゃあなんで書いたの？ということだけれども「ビルド」そのものの基本を知りたかったため。
- 各ソースコードの静的解析を行う
- プリプロセッサで前処理を行う
- ソースコードのコンパイル
- 各オブジェクトファイルとライブラリをリンクする
- 4.の「リンカー」で各オブジェクトファイルやライブラリのリンクが行われ、全ての部品をリンクすることで、最終的に「実行ファイル」が完成
※リンカー(linker)：ライブラリに収録された中間言語ファイル・ソースをコンパイルして生成された中間言語ファイルを１つに結合し、最終的な実行形式ファイルにするプログラム（これもCならではのものかと）。リンカーそのものは、Cならではの言語仕様だが、他の言語でも同じ役割をする物はあるのでは？
さまざまなビルドについて
JavaScriptをサーバーサイド上で実行する環境であるNode.jsのパッケージ管理システムnpmパッケージの dist/ディレクトリ(vue@2.6.12/dist/) では Vue.js の多くのビルドファイルがある。具体的な中身は以下の添付の写真の通り。
そして、それらの違いを区分すると以下の公式の通りになる。
###Vue.jsの用語
- 完全: コンパイラとランタイムの両方が含まれたビルド（ファイル群）。
- Vue.jsのコンパイラ: テンプレート文字列を JavaScriptのrender関数にコンパイルするためのコード。テンプレートの表現をJavaScriptに落とし込むプログラムともいえる。
- ランタイム: Vue インスタンスの作成やレンダリング、仮想 DOM の変更などのためのコード。基本的にコンパイラを除く全てのもの。
##ランタイム + コンパイラとランタイム限定の違い
- もしクライアントでテンプレートをコンパイルする必要がある (例えば、 テンプレートオプションに文字列を渡す、もしくは DOM 内の HTML をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち、完全ビルドが必要。
// これはコンパイラが必要です（Vueのテンプレート構文を使っているため）
new Vue({
template: '<div>{{ hi }}</div>'
})
// これはコンパイラは必要ありません（JavaScriptのrender関数だから）
new Vue({
render (h) {
return h('div', this.hi)
}
})
- vue-loader や vueify を使うと、.vueファイル内のテンプレートがビルドを始めるタイミングでJavaScriptに事前コンパイルされる。
開発モードと本番モードの違い
- CommonJS と ES Module ビルドはバンドラでの利用を意図しているため、圧縮バージョンを提供していないため、開発者の責任で最終成果物を圧縮する必要がある。
- バンドラー（bundler）
- 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。
- 例：Webpack、Rollup、Browserify
#参考