Search code examples
javascriptvue.jsnuxt.jsvite

Vite: Is there a possibility to exclude code elements from being built?

I'm looking for a "feature" in Vite which will allow me to exclude some code from being built. As far as I remember in webpack there was a feature when you could create some comments like:

###SOMETHING
<code goes here>
###END_SOMETHING

and this code between ###SOMETHING and ###END_SOMETHING wasn't included in output files during build process. Is there relative feature available in Vite or maybe there is another way to perform such a action? Basically code between these "tags" needs to be in file and working during vite dev, but it needs to be omitted by vite build.

I've found rollup settings but it only includes whole files.

Solution

  • It should be possible to conditionally evaluate Javascript according to the execution mode (production or development) by using the import.meta.env variable.

    vite dev will run in development mode by default and vite build will use production mode (you can override though through --mode)

    See https://vitejs.dev/guide/env-and-mode.html#modes

    In your case you can use import.meta.env.DEV to see if you are in development mode and run conditionally some code, e.g.:

    if (import.meta.env.DEV) {
    // code runs in vite dev
}