如何在Vite中配置ES构建排除外部库、CJS构建包含外部库？

完全可以轻松实现这个需求，你只需要把rollupOptions.external改成一个动态判断的函数，根据当前构建的格式（es/cjs）来决定是否返回外部依赖名单：

修改后的完整配置如下：

build: {
  lib: {
    entry: 'src/index.ts',
    name: 'my-library',
    fileName: 'index',
    formats: ['es','cjs'],
  },
  rollupOptions: {
    external: (id, context) => {
      // 仅当构建格式为es时，标记指定依赖为外部依赖
      if (context.format === 'es') {
        return ['lit-html', 'lit-element', 'lit', '@lit'].some(pkg => id.startsWith(pkg));
      }
      // CJS构建时不标记任何外部依赖
      return false;
    },
  }
},

关键说明 #

• external配置支持传入函数，函数接收两个参数：id（当前模块的标识符）和context（包含当前构建的格式等上下文信息）
• 当构建格式为es时，检查当前模块是否属于指定的外部依赖列表，是则返回true（标记为外部依赖，不打包进产物）
• 当构建格式为cjs时，直接返回false，所有依赖都会被打包进CJS产物中

另外还有一种替代方案：在rollupOptions.output中针对不同格式单独配置，但函数式的写法更简洁统一，适合你的场景。

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