vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。
Contents
モジュールバンドラ
私が見るポイントとして下記3点です。
- ファイル監視の自動更新(ブラウザホットリロードはできれば程度)
- ビルド時間
- デバッグ
- 最低限カスタマイズができること
- 設定がある程度簡便なこと
webpack
一番有名なのはこれだと思います。情報が出て来やすく、FWなしだと多くのかたはこれを使うかと思います。
難点としては色々な設定ができる分、その分設定が結構面倒臭いです。
vue cliでテンプレートは作ってもらえますが、理解できないパラメータがあるのは結構不愉快です。(3系以上はdefaultで大部分作ってくれますが。)またビルド時間も少し重い印象です。
依存ライブラリも多く、インストールでこけることも多々ありました。
laravel-mix
laravel使っている方であれば標準で入っているので使っているでしょう。
laravel使わなくてもこれ単体で使えます。実質webpackのラッパーですのでwebpackと同じなんです。
webpack.mix.jsが設定ファイルですが、複雑な設定(特にプラグイン関連の記述)があまりなく、元ファイルと出力ファイルを書く程度で非常に直感的にかけます。
ビルド時間はwebpackと同じか少し遅いかと思います。元のソースをベースにしたデバッグもできます。
rollup
比較的最近のモジュールバンドラです。vueで試したところうまくいかなかったのですが、設定ファイルもwebpackよりやや簡単で、わかりやすいです。
出力パターンをiifeにしておくと元のソースがそのまま残るため、デバッグが非常に簡単です。
ビルド時間も比較的短めです。
parcel
設定ファイル不要です。
ビルド時間も非常に高速で、主に小規模用のモジュールバンドラという印象です。
デバッグ時、元ファイルを参照することが難しく、ビルドされたファイルから想像しつつ、修正をしないといけません。
が、うまくデバッグできるような方法もありそうなので調査中です。
vue-cliについて
vueの環境を作るために勉強のために独自にvueの設定を調べたり、書いたりするのは勉強になりますが、実務ではvue-cliをインストールするのが一番楽だと思います。
npm install -g @vue/cli;
以前は npm install -g vue-cli; だったんですが(2系)2020年6月現在は4系になり上記のようにインストールし、
vue create プロジェクト名(ディレクトリ) で自動的に設定をしてくれます。
公式
Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)
改善点1 簡易サーバーのルートテーブルの設定
dockerを使っているのですが、vue-cliも@vue/cliもホットリロードのURLはhttp://localhost:8080になるのですが、以前(vue-cli)はポートを開放してもつながらなかったのですが、今回(@vue/cli)では繋がりました。
vue-cliの場合(というかwebpackですが),npm run devの起動コマンドを下記のようにする必要があります。
package.json
|
1 2 3 4 5 6 7 8 |
{ ・・・・・・・・ "scripts": { # -- host 0.0.0.0が追加部分です。 "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --host 0.0.0.0" }, ・・・・・・・・ } |
webpack.config.js
*「Invalid Host header」というメッセージが出た時に下記の修正をすれば改善されます。
|
1 2 3 4 5 6 7 |
module.exports = { ・・・・・・・・・・ devServer: { disableHostCheck: true } ・・・・・・・・・・ } |
webpack-dev-serverで起動したアプリが「Invalid Host header」と表示される場合の対処法
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動
vue/cliのドキュメントを見ましたが、3系では上記設定がdefaultでされているようです。
https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-serve
改善点2 設定ファイルが簡易化
defaultで設定される項目が増えたことで、設定ファイルなしでも動くように見えます。最初使った時に、入力、出力ファイル名すら決めていないで、どこで設定されているのかと思いました。
カスタマイズしたい場合はvue.config.jsというファイルをおく必要があります。
