如何配置vite.config.ts实现库模式构建及HTML示例双模式运行？

配置思路 #

通过Vite的库模式打包核心代码，结合多页面构建处理示例页面，再利用环境区分的路径别名，让示例在开发和预览模式下都能正确加载依赖。

完整配置代码 #

import { defineConfig } from 'vite';
import { resolve } from 'path';
import fs from 'fs';
import typescript from '@rollup/plugin-typescript';

export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    resolve: {
      alias: {
        '@my-lib': isProduction 
          ? resolve(__dirname, 'dist/index.js') 
          : resolve(__dirname, 'src/index.ts'),
      },
    },
    build: {
      // 库模式配置：打包src/index.ts到dist/index.js
      lib: {
        entry: resolve(__dirname, 'src/index.ts'),
        fileName: 'index',
        formats: ['es'], // 按需选择格式，如es/cjs/umd
      },
      // 多页面构建：处理src/examples下的所有HTML
      rollupOptions: {
        input: Object.fromEntries(
          fs.readdirSync(resolve(__dirname, 'src/examples'))
            .filter(file => file.endsWith('.html'))
            .map(file => [
              file.replace(/\.html$/, ''),
              resolve(__dirname, 'src/examples', file)
            ])
        ),
        // 示例页面输出到根目录examples文件夹
        output: {
          dir: resolve(__dirname, 'examples'),
          entryFileNames: '[name].js',
          chunkFileNames: '[name]-[hash].js',
          assetFileNames: '[name]-[hash].[ext]',
        },
      },
      // 库文件输出到dist目录
      outDir: resolve(__dirname, 'dist'),
    },
    plugins: [
      typescript({
        tsconfig: resolve(__dirname, 'tsconfig.json'),
        include: ['src/**/*.ts'],
      }),
    ],
    // Dev服务器配置：启动时打开源码示例页面
    server: {
      open: '/src/examples/',
    },
    // Preview配置：预览时打开构建后的示例页面
    preview: {
      open: '/examples/',
    },
  };
});

关键步骤说明 #

1. 修改示例导入路径
   把所有示例代码中import '../index.ts'替换为import { 你的导出内容 } from '@my-lib'，通过别名统一管理依赖路径。

2. 库模式打包
   build.lib配置指定了库的入口文件、输出文件名和模块格式，确保核心代码被打包到dist/index.js。

3. 多页面构建
   通过fs模块自动扫描src/examples下的HTML文件作为构建入口，输出到根目录的examples文件夹，保持页面结构一致。

4. 环境区分的别名
   开发模式下@my-lib指向源码文件，生产构建后指向打包好的库文件，保证dev时实时调试源码，preview时加载最终构建产物。

5. TS语法支持
   引入@rollup/plugin-typescript处理TypeScript编译，确保TS代码正常打包。

补充配置（可选） #

在tsconfig.json中添加别名配置，让TypeScript语法提示正常：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@my-lib": ["src/index.ts"]
    }
  }
}

验证运行 #

• 开发模式：执行vite dev，自动打开示例页面，修改源码实时生效。
• 生产构建：执行vite build，同时生成dist/index.js和examples目录下的页面。
• 预览构建产物：执行vite preview，自动打开构建后的示例页面，验证加载dist/index.js是否正常。

内容的提问来源于stack exchange，提问作者Yukulélél