Vue 3 は、Web 開発の世界で引き続き注目を集めています。データの反応性、コンポーネントの動作の構成、その他多くの機能に対する最新のアプローチを備えた Vue 3 には、この種の注意が必要です。Vue で少し助けが必要な唯一の側面は、エンタープライズ ワークスペース ツールです。そこで、Nrwl のモノリポ ツール Nx が登場し、あらゆる Vue 環境を強化できるのです。

Nx のモノレポのパワー

ソース コードに関しては、「モノリポジトリ」の活用もソフトウェア エコシステムで増加傾向にあります。コードを共有するためにビルド/デプロイ パイプラインを設定する必要がない世界を想像してみてください。コードを再利用するための障壁は大幅に小さくなります。コードの共有が容易になるという期待により、本番環境への迅速なパスが開かれます。モノレポ戦略が魅力的な理由は他にもたくさんあるので、それが自分のニーズに合うかどうかを確認するために調べてみるのが最善です。

問題や非効率性が発生する可能性があるため、モノリポジトリが無料で使えるというわけではありません。堅牢で実戦テストされたツールは、これらの問題の解決に役立ちます。Nxはそのツールです。

Nx は、モノリポジトリ全体でコーディング スタイルと境界を強制し、それらの固有のユースケースに合わせて Nx を拡張することにより、コードを生成するための堅牢なアーキテクチャを提供します。何よりも、モノリポジトリへの切り替えは、これまで個別のコード ベースを管理する場合と同様にシームレス (またははるかに優れた) 開発者エクスペリエンスになります。

Vite を使い始める

この記事では、 Viteを使用した Nx モノリポジトリ内の Vue 3 アプリに焦点を当てます。一般に、 Vue CLI は非推奨になっているため、Vite に移行するのが最善です。

VueSchool には、 Vite への移行に関する素晴らしい記事があります。見てみな！簡単なヒントとして、Webpack から Vite への移行で最も難しい部分は、Vite と互換性のある依存関係を見つけること、または既存のサードパーティの依存関係をサポートする適切な Vite プラグイン構成を理解することかもしれません。

もう 1 つ: Nx バージョン 16 では、新しいスコープ付きパッケージ ( @nx/) が導入されました。これは既存のプラグインに対する重大な変更であるため、最新の 15 バージョンに焦点を当てます。変更が実装されると、この記事が更新されます。

検討する価値のある主な Vue プラグイン

Nx は、多くのフロントエンドおよびバックエンド フレームワークに対するファーストパーティのサポートを提供します。ただし、まだ Vue を正式にサポートしていません。幸いなことに、Vue にはすでに Nx サポートを開発している強力なオープンソース コミュニティがあります。

この記事の執筆時点では、調査する価値のある 2 つのプラグインがあります:nx-vue3-viteと@nxext/vue。どちらのプラグインを使用しても、いくつかの長所と短所があります。どちらも積極的なサポートを受けています。どちらもアプリケーションおよびライブラリ プロジェクトのコード生成を提供します。どちらも独自の Vite executor を持っていますが、Nx のファーストパーティ executor に積極的に移行しています。違いは次のとおりです。

• @nxext/vueこの記事の執筆時点では、本番環境に対応していません。本番環境に対応するために、このプラグインに関するコミュニティは、ジェネレーターが基本レベルのニーズを満たしていること、およびプロジェクトが Nx の Vite executor で生成されていることを確認したいと考えています。
• nx-vue3-viteは、アプリケーション コードの生成に対して、非常に独自の考え方を持ったアプローチをとっています。このプラグインは、アプリケーション プロジェクトの作成の一部として Vuex と Cypress のセットアップを生成します。これらの依存関係を使用する計画があったとしても、それは大きな欠点ではないかもしれません。

ただし、全体的には、Vue を採用し、Nx モノリポジトリで Vue を使用したいと考える人が増えるにつれて、これらの問題が解決される可能性が高くなります。コード生成戦略を考えるのは難しいため、何もない状態から始めるよりも、これらのプラグインのいずれかを使用する方が良いでしょう。

これらのプラグインは、あらゆるプロジェクトをスムーズに進めることができます。

Nx Monorepo と Vue: アプリに生命を吹き込む、ステップバイステップ

新しい Nx ワークスペースから作業し、Vue アプリケーションを作成し、 を使用するようにプロジェクトを構成し@nx/vite、最後に既存のプロジェクトを新しく作成したアプリケーションにコピーします。手順はNx ドキュメントで参照されています。

ワークスペースを作成する

まず、次のコマンドを使用して空のワークスペースを作成します。

npx create-nx-workspace@15

Nx が初期ワークスペースのセットアップを完了したら、nx-vue3-vite、@nrwl/jest@15、をインストールします@nrwl/vite@15。@nxext/vueまだ本番環境の準備ができていないため、 に焦点を当てていきますnx-vue3-vite。

npm install -D nx-vue3-vite @nrwl/jest@15 @nrwl/vite@15

アプリの生成は非常に簡単です。概念的には、コードを生成するために使用する関数を実行します。Nx ではこれをジェネレーターと呼びます。vue3-vitefromというジェネレーターを使用しますnx-vue3-vite。次のコマンドでジェネレーターを実行します。

npx nx generate nx-vue3-vite:vue3-vite {{nameOfApp}}

将来の参照のために、Nx はコードを生成するたびにプロンプ​​トを表示することがあります。これは、使用しているジェネレーターによって異なります。場合に備えてvue3-vite、アプリケーションの名前を指定することで、必要なオプションがすべて満たされます。

この時点で、既存の Vue アプリケーションがないことを前提として、Vue アプリケーションの構築を開始する準備が整いました。

Nx の Vite 実装を使用する

Nx の公式 Vite executor に移行するのは簡単です。アプリ ディレクトリで を開きproject.json、以下を見つけます。

"build": {
      "executor": "nx-vue3-vite:build-app",
      "options": {
        "dist": "dist/packages/{{nameOfApp}}"
      }
    },

"build": {
      "executor": "@nrwl/vite:build",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "outputPath": "dist/packages/{{nameOfApp}}"
      },
      "configurations": {
        "development": {
          "mode": "development"
        },
        "production": {
          "mode": "production"
        }
      }
    },

もう 1 つの変更は、serveすべてをserve次のものに置き換えることです。

"serve": {
      "executor": "@nrwl/vite:dev-server",
      "defaultConfiguration": "development",
      "options": {
        "buildTarget": "{{nameOfApp}}:build"
      },
      "configurations": {
        "development": {
          "buildTarget": "{{nameOfApp}}:build:development",
          "hmr": true
        },
        "production": {
          "buildTarget": "{{nameOfApp}}:build:production",
          "hmr": false
        }
      }
    },

現在、このアプリケーションは を使用しています@nrwl/vite!

アプリケーションを置き換える

特にアプリケーションがすでに Vite 上にあるため、この部分は十分に簡単です。ここで行う必要があるのは、既存のアプリをこの新しいディレクトリにマージし、package.json依存関係を使用して を更新することだけです。プロジェクトによっては、project.json真実を表すために のパス参照を更新する必要がある場合があります。これは完全にアプリケーションに基づいています。

どうですか@nxext/vue？

@nxext/vueのセットアップ手順 (依存関係のインストール、アプリの生成、Nx の Vite 実装への切り替え、既存のアプリのコピー) はほとんど同じですが、参照するのは のドキュメントです@nxext/vue。プラグインの今後の機能強化では、 を更新する必要がなくなる可能性があります。project.jsonこれは、プラグインがすでに を使用しているためです@nrwl/vite。

結論

Nx には堅牢なアーキテクチャがあり、新しいツールの使用方法を説明するだけで済みます。Vue を Nx モノリポジトリで使用可能にして拡張できるようにすることで、それがわかります。Vite はファーストパーティのプラグインであるため、これは簡単です。Vue の人気が高まるにつれて、より堅牢なプラグインが利用可能になり、アプリケーションやライブラリの生成が容易になります。

このことを考えると、他にどのようなフレームワークをこのモノリポジトリで設定できるようになるのでしょうか?

次回は AngularJS を試してみるのもいいかもしれません。

HeroDevs について

HeroDevs は、フロントエンド開発を専門とするソフトウェア エンジニアリングおよびコンサルティング スタジオです。私たちのチームは、Angular CLI、Angular Universal、Scully、XLTS (AngularJS、Vue2、Protractor などの長期サポート) などのプロジェクトを作成または共同作成してきました。私たちは、急成長を遂げている新興企業や、Google、GE、Capital One、Experian、T-Mobile、Corteva などの世界最大級の企業と協力しています。私たちについて詳しくは、 herodevs.comをご覧ください。