7

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.

Incepter
  • 2,711
  • 15
  • 33

2 Answers2

6

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 {}
});
Buhanov
  • 61
  • 2
  • 2
    I appreciate your answer, thanks a lot. But I need in a single run to execute two build jobs, each one with different value for the mode variable. I can easily achieve this with rollup and/or webpack. I think I ll stick to them for now. – Incepter Nov 11 '22 at 08:26
4

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.

Incepter
  • 2,711
  • 15
  • 33