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

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

要件整理#

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

なぜダメなのか？#

`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 をすべて packages ディレクトリに配置し、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