CODEWITHSUNDEEP
reactjswebpackviterollupesbuild
Incepter
Incepter

Reputation: 2958

How to do multiple bundles with vite?

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

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.

Upvotes: 12

Views: 21122

Answers (2)

Incepter
Incepter

Reputation: 2958

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.

Upvotes: 9

Buhanov
Buhanov

Reputation: 101

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

Upvotes: 10

Related Questions