vueを通じて-cliを使ってWebpackの多環境設定とリリース問題を修正する方法

Vueが今このほど人気がある理由の一つは、公式のスタートアップツールであるVueが貢献しています。-cliは初心者にとって環境構築のコストを大幅に簡略化しますが、実際の業務ではwebpackを改造するための他の機能を実現する必要があります。この記事では、実際の業務ニーズに基づいて、まずVueを学習します。-cliで生成したテンプレートをその後の修正を行います。

Vue-cliが生成するテンプレートファイルのディレクトリ

├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── Hello.vue
│ └── main.js
└── static

この記事が主に注目するポイントは以下の通りです

build - コンパイルタスクのコード

config - webpackの設定ファイル

package.json - プロジェクトの基本情報

具体的には、webpackの各設定行の意味について詳しく説明しません。vueを参照してください。2.0フラットファイルのwebpack設定ファイルの分析

一般的なニーズ1：多環境設定とデプロイ

Vue-cliが生成するテンプレートは、npm run dev、npm run buildという一行のスクリプトを設定しており、開発環境サービスを起動し、パッケージを構築します。しかし、通常の企業の開発プロセスでは、開発、テスト、本番環境など、少なくとも3つの環境があり、それぞれの環境のサーバーへのリクエスト先のアドレスや設定パラメータが異なるため、自動化スクリプトを実行して構築とデプロイを行う必要があります。

まずこの問題を明確にする必要があります。以下は、作者：郑海波、リンク、出典：知乎から転載した文章です。

これはVueとは関係がなく、一般的な問題です：コードがどこで構築されるかです。もしユーザーのサーバーが運行サーバーを指しているなら、どちらも良い選択ではありません。多くの新人、私も含めて、部署コードはこんな感じだと思っていました。

しかし、大きなインターネット企業では少し面倒です。以下の説明は一般的な方法であり、プロセスを簡略化して、新人の理解を容易にするためです。gitまたはsvnサーバーにコードをコミットする際には、ここではソースファイルであり、ビルド後のファイルではありません。

2サーバー構築時にgitサーバーからリリースするコードバージョンを引き出し、ここで依存関係のインストールが完了し、Vueなどの依存関係が構築されます。また、デプロイに使用するファイルを構築し、これらのファイルは通常圧縮パックに圧縮して管理されます。

3ビルド後のリリースパッケージは中継ステーションにアップロードされます：ファイル管理サーバークラスタ

4実際に運用されているサーバーは単一のものではなく、クラスタであり、これらのサーバーはファイルサーバーから対応するバージョンの同じ圧縮ファイルを引き出し、解凍して最終的に実行します。

　

実際には、明確な前後順序のフローが存在しており、すべて手動で操作する場合は非常に面倒です。したがって、大企業では通常、これらの作業を全体的に統括する自動デプロイプラットフォームがあります。開発者は「一括デプロイ」をクリックするだけで、上記の内容が完了します。

例えば、gitlab、githubなどのウェブフック自動通知自動デプロイプラットフォームと連携すると、安定版のコードが送信されました（Push Event）。それで、ボタンをクリックする必要もありません。これは典型的なビルドデプロイ分離のケースであり、非常に多くの利点があります。例えば、ビルドされるのは同じコードであり、複数の環境のビルドで不一致になる可能性を避けることができます。ビルドは高コストの行為であり、サーバーの不安定性を引き起こす可能性があります。迅速にリロードまたはリカバリできるため、同じバージョンのコードはリコンストラクトする必要はありません。

これだけ説明すると、ビルド構築は単純なことではありません。したがって、自動化ツールが必要です。既存の成熟したソリューションは、アプリケーションコンテナエンジンとしてのdockerをビルド、リリースなどに使用します。ただし、この部分には特に詳しくありません。知識がある方が共有していただけると嬉しいです。

まとめ

以上は、編集者が皆さんに紹介したWebpackの多環境設定とリリース問題であり、皆さんに役立つことを願っています。何かご不明な点があれば、コメントを残してください。編集者はすぐに回答します。また、皆さんの支持に感謝しています。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に提供し、自己でアップロードしたものであり、このサイトは所有権を有しないものです。人工的な編集は行われていません。また、関連する法的責任も負いません。著作権侵害の疑いがある場合は、お気軽にお問い合わせください：notice#oldtoolbag.com（メールを送信する際には、#を@に変更してください）で通報し、関連する証拠を提供してください。一旦確認されると、このサイトは即座に侵害疑いの内容を削除します。