@huaiyou/config-build

基于 Vite 的共享构建配置，支持 TypeScript 和 React。

📦 安装

pnpm add -D @huaiyou/config-build vite

🚀 使用方法

Base 配置（通用项目）

创建 vite.config.ts：

import { defineConfig, mergeConfig } from 'vite';
import { baseConfig } from '@huaiyou/config-build/base';

export default defineConfig(
  mergeConfig(baseConfig, {
    // 你的自定义配置
  })
);

React 配置

对于 React 项目：

import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';

export default defineConfig(
  mergeConfig(reactConfig, {
    // 你的自定义配置
    resolve: {
      alias: {
        '@': '/src',
      },
    },
  })
);

✨ 特性

Base 配置

• ✅ ES2020 目标: 现代浏览器支持
• ✅ 源码映射: 便于调试
• ✅ 代码分割: 自动分离 vendor 代码
• ✅ 资源优化: 压缩和优化静态资源
• ✅ 开发服务器: 快速的 HMR 热更新

React 配置

继承 Base 配置，额外包含：

• ✅ React 插件: 官方 React 插件
• ✅ 自动 JSX: React 17+ 自动 JSX 运行时
• ✅ Fast Refresh: 保持组件状态的热更新
• ✅ 优化依赖: React 预构建优化

⚙️ 配置说明

构建选项

| 选项 | 值 | 说明 | | ----------------------- | --------- | ----------------------- | | target | es2020 | 构建目标 | | sourcemap | true | 生成源码映射 | | minify | esbuild | 使用 esbuild 压缩 | | chunkSizeWarningLimit | 1000 | chunk 大小警告限制 (KB) |

开发服务器

| 选项 | 值 | 说明 | | ------ | ------ | -------------- | | port | 3000 | 开发服务器端口 | | host | true | 监听所有地址 | | open | true | 自动打开浏览器 | | cors | true | 启用 CORS |

代码分割策略

自动将代码分割为以下 chunks：

• vendor-react: React 和 React DOM
• vendor: 其他第三方依赖
• 业务代码按需动态导入

🔧 高级用法

路径别名

import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';
import path from 'path';

export default defineConfig(
  mergeConfig(reactConfig, {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@components': path.resolve(__dirname, 'src/components'),
        '@utils': path.resolve(__dirname, 'src/utils'),
      },
    },
  })
);

环境变量

import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';

export default defineConfig(
  mergeConfig(reactConfig, {
    define: {
      __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
    },
  })
);

代理配置

import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';

export default defineConfig(
  mergeConfig(reactConfig, {
    server: {
      proxy: {
        '/api': {
          target: 'http://localhost:8080',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
  })
);

自定义插件

import { defineConfig, mergeConfig } from 'vite';
import { reactConfig } from '@huaiyou/config-build/react';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig(
  mergeConfig(reactConfig, {
    plugins: [
      visualizer({
        open: true,
        gzipSize: true,
        brotliSize: true,
      }),
    ],
  })
);

📝 Scripts 配置

在 package.json 中添加构建脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "type-check": "tsc --noEmit"
  }
}

🚀 性能优化建议

1. 使用动态导入: 路由和大型组件使用 import()
2. 优化图片: 使用现代格式 (WebP, AVIF)
3. Tree Shaking: 按需导入第三方库
4. 预加载: 关键资源使用 <link rel="preload">
5. CDN: 静态资源部署到 CDN

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进配置。

📄 License

MIT