sroxck

sroxck

HomeArchives

Documenting the experience of setting up the vite-wide project

71
AI Translation
This post is translated from Chinese into English through AI.View Original
AI-generated summary
The project aims to build an admin backend management system and a web frontend display system, both independently constructed using Vite while sharing common components and methods. Each project can have its own Vite configuration and plugins, allowing for separate packaging and tree-shaking to optimize build size. **Key Points:** - **Independence**: The admin and web systems are managed as separate projects, utilizing shared components from a common package. - **Avoiding Pages Solution**: The pages approach leads to bulky builds as all pages and dependencies are bundled together, affecting load speed. This project uses tree-shaking to include only necessary resources. - **Flexibility**: Unlike the pages solution, which has a fixed structure, this project allows for independent configuration and plugin management. - **Operational Simplicity**: Deployments are triggered by changes in specific directories, simplifying operations compared to the pages approach. - **Monorepo Considerations**: The project avoids the complexity of managing multiple packages in a monorepo, which can hinder efficiency and increase build times. It supports on-demand builds and simplifies dependency management. **Project Structure**: - **Packages Directory**: Contains the admin, web, and shared components. - **Plugins Directory**: Manages Vite plugins with a unified entry point. - **Scripts Directory**: Contains build and automation scripts. - **Types Directory**: Holds TypeScript type declarations. - **Config Directory**: Stores global configuration files for Vite and environment variables. **Type Support**: The project provides comprehensive type support across modules, ensuring strong type checking for components and functions. **Challenges Addressed**: - Configuration issues are resolved by allowing individual Vite configurations. - TypeScript issues are managed with a unified tsconfig. - TSX support is ensured by including all relevant directories in the tsconfig. Overall, the project is designed for modularity, flexibility, and efficient resource management.

Build a system that includes an admin backend management system and a web frontend display system, each independently built with Vite, sharing only common components and methods. The project supports setting individual Vite configurations and plugins separately from the global configuration, with each project packaged independently. Vite will build according to the dependencies and shared resources as needed.

Requirement Summary#

The requirement is to manage the admin backend management system and the web frontend display system within a single project. They operate independently, can utilize content from the shared package, are packaged separately, and support tree shaking.

Why Not?#

Why not use the pages solution?#

  1. Bulky Builds: The pages solution typically packages all pages, components, and dependencies together, resulting in both admin and web being bundled into a single bundle, which leads to larger file sizes and affects loading speed.

    This project ensures that each project only imports the resources and dependencies actually used through Tree Shaking, optimizing the package size.

  2. Lack of Flexibility: When using the pages solution, the project structure and configuration are often fixed, allowing only a unified configuration, making it difficult to adjust flexibly.

    This project supports independent configuration and plugin management, allowing developers to freely adjust project structure and build configuration as needed. Each module is a separate Vite project.

  3. Operational Complexity: The pages solution requires additional operational coordination.

    This project merely triggers deployment based on the directory of changed files.

Why not use the Monorepo solution?#

  1. Project Complexity: The Monorepo solution is suitable for large projects, but for small or medium-sized projects, managing multiple packages can lead to decreased development efficiency.

    This project provides independent module management, avoiding unnecessary complexity.

  2. Build Time: In a Monorepo, it may be necessary to build the entire repository each time, even if only one module has been modified. This can increase build time.

    This project supports on-demand builds, enabling quick responses to development needs.

  3. Dependency Management: The Monorepo solution requires meticulous management of dependencies between various modules, which may increase maintenance costs.

    This project simplifies dependency management through shared directories and independent configurations.

Project Setup#

The project directory is as follows
dir

The tsconfig is as follows

// [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/*"]
    }
  }
}

The config is as follows

// [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,
});

Type Support#

Unified configuration, multi-module usage, the project provides complete and clearly structured type support, including support for tsx, vine, and macros. SFC components, pure function components, and tsx components in any module will receive full type support, including automatic props and emits type strong validation and ref instance type support.

Problem Summary#

  1. Configuration Issues
    The solution is for each to have their own vite configuration, then configure a unified vite configuration at the root directory, allowing each to set their own independent configuration.

  2. TypeScript Issues
    The solution is to use a unified tsconfig, delete each one's tsconfig, and use the tsconfig from create-vue (directly taken, dependencies installed according to create-vue's package).

  3. TSX Support
    Using tsx is supported by default in create-vue. It is important to note that the include in tsconfig should wrap both admin and web. However, the best solution is to create a packages directory to place admin, web, and shared, and the include field should only contain this directory, but the unified vite configuration file should be wrapped.

  4. Common Component Type Issues
    Configure the paths field in tsconfig, setting paths in compilerOptions as follows

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

Directory Structure#

Packages Directory#

The packages directory is the project module directory, containing the following:

  • admin: Backend management system, built with Vite.

  • web: Frontend display system, built with Vite.

  • shared: Common directory for shared components and methods, used by both admin and web systems.

Plugins Directory#

The plugins directory is for centralized management of Vite plugins. Custom plugins and third-party plugins are exported through a unified entry file index.ts, facilitating unified management and usage.

Custom Plugin Specifications

  1. Plugin Naming: Use lowercase letters, with words separated by hyphens (e.g., my-custom-plugin).
  2. Plugin Structure: Each plugin should include an install method for registering the plugin in Vite.
  3. Documentation: Each plugin should include usage examples and configuration instructions for other developers to understand and use.

Scripts Directory#

The scripts directory contains project build scripts and other task scripts, primarily for automating builds, testing, and deployment tasks. Specific scripts can be added as needed.

Types Directory#

The types directory is for storing TypeScript type declaration files .d.ts. Global type module declarations can be added in this directory for use throughout the project.

Config Directory#

The config directory stores the project's global configuration files, including Vite configurations, environment variables, and other related settings. Configurations can be adjusted according to different environments (development, testing, production).

This article was synchronized by Mix Space to xLog. The original link is http://www.sroxck.top/posts/note/wide

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.