この記事を書こうと思ったワケ

「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 をテンプレートとして利用し要素にマウントする) 場合は、コンパイラすなわち、完全ビルドが必要。

main.js

// これはコンパイラが必要です（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

【Vue.js 公式仕様を読み解く】インストール