vite-wide プロジェクト構築の経験を記録する

admin バックエンド管理システムと web フロントエンド表示システムを含むプロジェクトを構築し、それぞれ独立して Vite を使用してビルドし、共通コンポーネントとメソッドのみを共有します。プロジェクトは、グローバル設定の外でそれぞれの Vite 設定とプラグインを個別に設定することをサポートし、各プロジェクトは個別にパッケージされ、Vite は依存関係と共通リソースに基づいて必要に応じてビルドします。

要件整理#

要件は、1 つのプロジェクト内で admin バックエンド管理システムと web フロントエンド表示システムを管理することです。彼らはそれぞれ独立しており、shared パッケージの内容を使用でき、パッケージ時にはそれぞれがパッケージされ、tree shaking をサポートします。

Why Not?#

なぜ `pages` ソリューションを使用しないのか？#

ビルドが肥大化する：pages ソリューションは通常、すべてのページ、コンポーネント、および依存関係を一緒にパッケージ化します。例えば、admin と web は最終的に 1 つのバンドルにパッケージ化され、最終的なビルドファイルのサイズが大きくなり、読み込み速度に影響を与えます。

このプロジェクトは Tree Shaking の方法を通じて、各プロジェクトが実際に使用するリソースと依存関係のみを引き入れることを保証し、パッケージサイズを最適化しました。
柔軟性が不足する：pages ソリューションを使用する際、プロジェクト構造と設定は固定されており、統一された設定を使用するしかなく、柔軟に調整することが難しいです。

このプロジェクトは独立した設定とプラグイン管理をサポートしており、開発者はニーズに応じてプロジェクト構造とビルド設定を自由に調整できます。各モジュールは独立した Vite プロジェクトです。
運用管理の複雑性：pages ソリューションは追加の運用管理が必要です。

このプロジェクトは、変更ファイルのディレクトリに基づいてデプロイをトリガーするだけです。

なぜ Monorepo ソリューションを使用しないのか？#

プロジェクトの複雑性：Monorepo ソリューションは大規模プロジェクトに適していますが、小規模または中規模プロジェクトにとっては、複数のパッケージを管理する複雑さが開発効率を低下させる可能性があります。

このプロジェクトは独立したモジュール管理を提供し、不必要な複雑さを回避します。
ビルド時間：Monorepo では、モジュールを 1 つ変更しただけでも、毎回全体のリポジトリをビルドする必要があるかもしれません。これにより、ビルド時間が増加します。

このプロジェクトは必要に応じてビルドをサポートし、開発ニーズに迅速に対応できます。
依存関係管理：Monorepo ソリューションは、各モジュール間の依存関係を詳細に管理する必要があり、メンテナンスコストが増加する可能性があります。

このプロジェクトは共有ディレクトリと独立した設定を通じて、依存関係管理を簡素化しました。

プロジェクト構築#

プロジェクトディレクトリは以下の通りです。
dir

tsconfig は以下の通りです。

// [tsconfig.json]
{
  "files": [],
  "compilerOptions": {
    "module": "NodeNext"
  },
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

// [tsconfig.node.json]
{
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

// [tsconfig.app.json]
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": [
    "env.d.ts",
    "packages/**/*",
    "packages/**/*.vue",
    "packages/**/*.tsx",
    "./config.global.ts"
  ],
  "exclude": ["packages/**/__tests__/*"],
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@shared/*": ["./packages/shared/*"]
    }
  }
}

config は以下の通りです。

// [config.global.ts]
import path from "path";
import { plugins } from "./plugins";
export const sharedConfig = {
  commonPlugins: [...plugins],
  resolve: {
    alias: {
      "@shared": path.resolve(__dirname, "./packages/shared"),
    },
  },
};

// [plugins/index.ts]
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import { PluginOption } from "vite";
import vueJsx from "@vitejs/plugin-vue-jsx";
export const plugins: PluginOption[] = [
  vue(),
  vueJsx(),
  AutoImport({
    resolvers: [ElementPlusResolver()],
  }),
  Components({
    resolvers: [ElementPlusResolver()],
  }),
];

// [web/vite.config.ts]
import { defineConfig } from "vite";
import path from "path";
import { sharedConfig } from "../../config.global.ts";
const { commonPlugins, ...commonConfig } = sharedConfig;
export default defineConfig({
  plugins: [...commonPlugins],
  root: path.resolve(__dirname),
  ...commonConfig,
});

// [admin/vite.config.ts]
import { defineConfig } from "vite";
import path from "path";
import { sharedConfig } from "../../config.global.ts";
const { commonPlugins, ...commonConfig } = sharedConfig;
export default defineConfig({
  plugins: [...commonPlugins],
  root: path.resolve(__dirname),
  ...commonConfig,
});

型サポート#

統一された設定で、複数のモジュールを使用し、プロジェクトは完全かつ構造が明確な型サポートを提供します。これには tsx、vine、macros の型サポートが含まれ、任意のモジュール内の sfc コンポーネント、純粋な関数コンポーネント、および tsx コンポーネントは完全な型サポートを受け、props と emits の型の強力な検証および ref インスタンスの型サポートが含まれます。

問題のまとめ#

設定の問題
解決策は、それぞれが独自の vite 設定を持ち、ルートディレクトリに統一された vite 設定を配置し、それぞれが独自の設定を行えるようにすることです。
ts 型の問題
解決策は、統一された tsconfig を使用し、それぞれの tsconfig を削除し、create-vue の tsconfig を使用することです（直接持ってきて、依存関係は create-vue のパッケージに従ってインストールします）。
tsx サポート
create vue では tsx がデフォルトでサポートされているため、注意が必要です。tsconfig の include には admin と web の両方を含める必要がありますが、最良の解決策は packages ディレクトリを作成し、admin と web と shared をすべてそのディレクトリに配置し、include フィールドにはそのディレクトリのみを含めることです。ただし、統一された vite 設定ファイルを包む必要があります。
共通コンポーネントの型の問題
tsconfig で paths フィールドを設定し、compilerOptions に paths を次のように設定します。

 "paths": {
      "@shared/*": ["./packages/shared/*"]
  }

ディレクトリ構造#

packages ディレクトリ#

packages はプロジェクトモジュールディレクトリで、以下の内容を含みます：

admin：バックエンド管理システム、Vite を使用してビルド
web：フロントエンド表示システム、Vite を使用してビルド
shared：共通ディレクトリ、共有コンポーネントやメソッドを格納し、admin と web システムで使用します。

plugins ディレクトリ#

plugins は Vite プラグインを集中管理するディレクトリです。カスタムプラグインとサードパーティプラグインは、統一されたエントリファイル index.ts を通じて plugins オブジェクトをエクスポートし、統一的に管理および使用できるようにします。

カスタムプラグインの規範

プラグイン名：小文字を使用し、単語の間はハイフンで区切ります（例：my-custom-plugin）。
プラグイン構造：各プラグインは、Vite にプラグインを登録するための install メソッドを含むべきです。
ドキュメント説明：各プラグインには、他の開発者が理解し使用できるように、使用例と設定説明を添付するべきです。

scripts ディレクトリ#

scripts ディレクトリには、プロジェクトビルドスクリプトやその他のタスクスクリプトが含まれ、主に自動化ビルド、テスト、デプロイなどのタスクに使用されます。具体的なスクリプトは必要に応じて追加できます。

types ディレクトリ#

types ディレクトリは TypeScript 型宣言ファイル .d.ts を格納するために使用されます。このディレクトリにグローバル型モジュール宣言を追加して、プロジェクト全体で使用できるようにします。

config ディレクトリ#

config ディレクトリには、プロジェクトのグローバル設定ファイルが格納され、Vite 設定、環境変数、およびその他の関連設定が含まれます。異なる環境（開発、テスト、製品）に応じて、適切な設定を行うことができます。

この文は Mix Space によって xLog に同期更新されました。原始リンクは http://www.sroxck.top/posts/note/wide