如何用vite做多个捆绑？

Question

使用vite js捆绑我的库，我需要同时提供两个版本：

• 生产用途
• 通过 devtools 集成开发特定代码和警告。

当我使用 webpack 时，我有：

module.exports = [
  defaultUmdBuild("production"),
  defaultUmdBuild("development"),
];

它输出两个文件，然后我的库有这个入口点：

'use strict';

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

如何使用 vite 做同样的事情？

谢谢。

Answer 1

我认为你可以使用 vite模式来实现这一点。

使用不同模式运行构建命令：

vite build --mode production #default
vite build --mode development

在 vite.config 文件中，您可以根据模式值拥有不同的构建配置。

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig(({ mode }) => {
  if (mode === 'production') {
    return {
      // ...
      build: {
        outDir: 'build_production'
      }
    }
  }

  if (mode === 'development') {
    return {
      // ...
      build: {
        outDir: 'build_development'
      }
    }
  }
  return {}
});

Answer 2

对于来这里寻求答案的人来说，

这是我最终所做的（如果发生变化，请编辑）

在package.json：

"build": "tsc && vite build --config vite.config.lib.dev.ts && vite build --config vite.config.lib.prod.ts"

然后相应地定义两个文件。