skillup

技術ブログ

JavaScript サーバー・ネットワーク

vueの環境構築に関して(モジュールバンドラの比較やvue-cliコマンドなど)

投稿日:2020年6月15日 更新日:

vueをビルドする場合、一般的にはwebpackなどのモジュールバンドラを使うかと思います。少しまとめて置こうかと思います。

モジュールバンドラ

私が見るポイントとして下記3点です。

  • ファイル監視の自動更新(ブラウザホットリロードはできれば程度)
  • ビルド時間
  • デバッグ
  • 最低限カスタマイズができること
  • 設定がある程度簡便なこと

webpack

一番有名なのはこれだと思います。情報が出て来やすく、FWなしだと多くのかたはこれを使うかと思います。

難点としては色々な設定ができる分、その分設定が結構面倒臭いです。

vue cliでテンプレートは作ってもらえますが、理解できないパラメータがあるのは結構不愉快です。(3系以上はdefaultで大部分作ってくれますが。)またビルド時間も少し重い印象です。

依存ライブラリも多く、インストールでこけることも多々ありました。

laravel-mix

laravel使っている方であれば標準で入っているので使っているでしょう。

laravel使わなくてもこれ単体で使えます。実質webpackのラッパーですのでwebpackと同じなんです。

webpack.mix.jsが設定ファイルですが、複雑な設定(特にプラグイン関連の記述)があまりなく、元ファイルと出力ファイルを書く程度で非常に直感的にかけます。

ビルド時間はwebpackと同じか少し遅いかと思います。元のソースをベースにしたデバッグもできます。

rollup

比較的最近のモジュールバンドラです。vueで試したところうまくいかなかったのですが、設定ファイルもwebpackよりやや簡単で、わかりやすいです。

出力パターンをiifeにしておくと元のソースがそのまま残るため、デバッグが非常に簡単です。

ビルド時間も比較的短めです。

モジュールバンドラrollupについて

parcel

設定ファイル不要です。

ビルド時間も非常に高速で、主に小規模用のモジュールバンドラという印象です。

デバッグ時、元ファイルを参照することが難しく、ビルドされたファイルから想像しつつ、修正をしないといけません。

が、うまくデバッグできるような方法もありそうなので調査中です。

モジュールバンドラparcelについて

vue-cliについて

vueの環境を作るために勉強のために独自にvueの設定を調べたり、書いたりするのは勉強になりますが、実務ではvue-cliをインストールするのが一番楽だと思います。

npm install -g @vue/cli;

以前は npm install -g vue-cli; だったんですが(2系)2020年6月現在は4系になり上記のようにインストールし、

vue create プロジェクト名(ディレクトリ) で自動的に設定をしてくれます。

公式

https://cli.vuejs.org/

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

Vue.jsのMarkdownアプリをコンテナで作った話

webpack.config.js

*「Invalid Host header」というメッセージが出た時に下記の修正をすれば改善されます。

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というファイルをおく必要があります。

https://cli.vuejs.org/config/#vue-config-js

vue-cli 3.0で始めるPWAとVue.jsのconfig周り

-JavaScript, サーバー・ネットワーク
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ネットワークコマンドについて(ping,nslookup,host,digなど)

前回のDNSの時にレコードタイプについて調べましたが、以前からあやふやだったネットワーク系のコメントについても調べてみようかと思います。 参考リンク 名前解決・疎通確認する際の基本的なLinuxコマン …

no image

nginxのデバッグ

今までいろいろと苦しめられてきた(汗)nginxのデバッグについて。 まず任意の文字や変数をログに出すことができます。 Contents1 変数の出力1.1 rewriteデバッグ2 小ネタ 変数の出 …

no image

zabbixアラートメール

以前、zabbixの基本設定についてこのエントリーでかきました。 今回はzabbixでの何らかの障害が発生した時に、アラートメールを送信したい場合について Contents1 ユーザーの登録&ユーザー …

no image

Firebaseでのミニアプリデプロイ

KVS的なDBを使うかもしれず、firebaseの復習をしております。以前、firebaseのサンプルなどちょこちょこ動かしましたが、firebaseに登録をしただけでデプロイまではしておりませんでし …

no image

Code4兄弟に関して(CodeCommit,CodeDeploy,CodeBuild,CodePipeline)

前回の記事で書いたCodeDeploy以外にもCI/CD絡みで色々と使用するサービスがあるので自分用にメモ。 Code兄弟なっていうようで・・・・ Contents1 各サービス1.1 CodeCom …

アーカイブ