前端工程化 - 构建体系

前端工程化 - 构建体系

在我的理解中, vite不是一个简单的构建工具,而是前端工程基础设施的一部分.
我会围绕性能 , 可维护性,团队复用 去设计它

业务背景

• 多个中后台项目
• 构建配置复制粘贴,改一处容易炸
• 插件, alias,proxy, env 不统一
• 新项目初始化慢

工程化做法:

1. 目录结构

   packages/
    ├─ vite-base/        # 构建基础能力
    │   ├─ plugins/
    │   ├─ config/
    │   └─ index.ts
    ├─ ui/
    ├─ utils/
   apps/
    ├─ admin/
    ├─ dashboard/
   

2. 封装统一的vite 配置

   // vite-base/index.ts
   
   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   import path from 'path'
   
   export function createViteConfig(options) {
     return defineConfig({
       plugins: [
         vue(),
         ...options.plugins || []
       ],
       resolve: {
         alias: {
           '@': path.resolve(process.cwd(), 'src')
         }
       },
       server: {
         port: options.port || 3000
       },
       build: {
         sourcemap: true,
         rollupOptions: {
           output: {
             manualChunks: options.manualChunks
           }
         }
       }
     })
   }
   

   项目中使用

   // apps/admin/vite.config.ts
   import { createViteConfig } from '@company/vite-base'
   
   export default createViteConfig({
     port: 4000,
     manualChunks: {
       vue: ['vue', 'vue-router']
     }
   })