如何使用Vite构建生产与开发双版本类库？

1. 配置Vite多构建目标 #

Vite支持导出配置数组来实现多构建输出，类似Webpack的多配置模式。在项目根目录的vite.config.js中编写如下配置：

import { defineConfig } from 'vite';

export default defineConfig([
  // 生产环境构建配置
  {
    mode: 'production',
    build: {
      lib: {
        entry: './src/index.js', // 你的类库源码入口文件
        name: 'MyLib', // 类库全局变量名（umd格式用）
        formats: ['umd'], // 可按需添加es、cjs等格式
        fileName: (format) => `mylib.production.${format}.js`,
      },
      outDir: 'dist',
      minify: 'terser', // 生产版本开启压缩
      define: {
        'process.env.NODE_ENV': JSON.stringify('production'),
      },
    },
  },
  // 开发环境构建配置
  {
    mode: 'development',
    build: {
      lib: {
        entry: './src/index.js',
        name: 'MyLib',
        formats: ['umd'],
        fileName: (format) => `mylib.development.${format}.js`,
      },
      outDir: 'dist',
      minify: false, // 开发版本关闭压缩，保留调试信息
      sourcemap: true, // 开启sourcemap方便调试
      define: {
        'process.env.NODE_ENV': JSON.stringify('development'),
      },
    },
  },
]);

2. 编写环境切换入口文件 #

在项目根目录创建index.js（作为npm包main字段的指向文件），保留和Webpack时代一致的环境判断逻辑：

'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/mylib.production.umd.js');
} else {
  module.exports = require('./dist/mylib.development.umd.js');
}

如果你的类库需要支持ESM，可额外创建index.esm.js并在package.json中配置exports字段：

// index.esm.js
if (import.meta.env.MODE === 'production') {
  export * from './dist/mylib.production.es.js';
} else {
  export * from './dist/mylib.development.es.js';
}

对应的package.json配置：

{
  "main": "./index.js",
  "module": "./index.esm.js",
  "exports": {
    ".": {
      "require": "./index.js",
      "import": "./index.esm.js"
    }
  }
}

3. 源码中的环境分支处理 #

在类库源码中，直接通过process.env.NODE_ENV区分环境，编写开发专属逻辑：

// src/index.js
export default function myLib() {
  // 开发版本专属警告与调试工具
  if (process.env.NODE_ENV !== 'production') {
    console.warn('[MyLib] 当前为开发版本，包含调试信息');
    // 集成开发者工具的代码
  }

  // 类库核心业务逻辑
  return 'Hello from MyLib';
}

Vite会在打包时自动替换process.env.NODE_ENV的值，生产版本中无关代码会被tree-shaking移除。

4. 执行打包 #

在package.json中添加打包命令：

{
  "scripts": {
    "build": "vite build"
  }
}

执行npm run build后，Vite会依次完成两个环境的构建，输出文件到dist目录。

内容的提问来源于stack exchange，提问作者Incepter