How to do multiple bundles with vite?

Question

Using vite js to bundle my library, I need to provide two versions at the same time:

• production usage
• development specific code and warnings with devtools integration.

When I was using webpack, I had:

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

which outputs two files and then I have this entrypoint to my library:

'use strict';

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

How to do the same using vite ?

Thanks.

Answer 1

For people coming here for an answer,

Here is what I ended up doing (Please edit if this ever changes)

In package.json:

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

And then define your both files accordingly.

Answer 2

I think you can achieve this using vite modes.

Run the build command using different modes:

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

In your vite.config file you can then have different build configurations based on the mode value.

// 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 {}
});