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 ments 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.

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 ments 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.

• javascript
• vue.js
• nuxt.js
• vite

• are you thinking about /* and */? – pqnet Commented Jul 27, 2023 at 21:42
• 1 No no, I don't want code to be mented, I want it to be working, but just omitted while built. – Nigtellios Commented Jul 27, 2023 at 22:06
• what does it mean? If you don't include code in the build it won't work. – pqnet Commented Jul 27, 2023 at 22:07
• 1 As I said in the post, code needs to be there in source file and needs to be working during vite dev, it just needs to be omitted while using vite build. I've updated the post so it's now more clear what do I mean. :) – Nigtellios Commented Jul 27, 2023 at 22:10
• There's also the dropLabels option in esbuild, but for some reason it doesn't seem to work with the current version of Vite. I posted a separate (but related) question about this here: Can I get Vite to drop certain lines of code using the 'dropLabels' option? – Simon E. Commented May 9, 2024 at 4:19

1 Answer 1

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
}