Babel plugins - moving from webpack to vite

[DocBouCou]

Hi,

I am planning to make the move, and to convert my project from Quasar CLI with Webpack to quasar cli with Vite. I am now using one babel plugin (transform-remove-console), is it possible to keep using it with Vite? Or is there a workaround?

Thanks.

[darekwojciechowski]

That Babel plugin won't carry over, because the Vite build doesn't run Babel. It transpiles with esbuild. So the plugin simply won't do anything. You don't need it: esbuild has this built in via its drop option, which strips console.* and debugger for you.

Add it in quasar.config.js and gate it to production so you keep your logs during dev:

build: {
  extendViteConf (viteConf) {
    if (process.env.NODE_ENV === 'production') {
      viteConf.esbuild = {
        ...viteConf.esbuild,
        drop: ['console', 'debugger']
      }
    }
  }
}

Run a production build and grep the output to confirm:

quasar build
grep -r "console.log" dist/spa/assets | head

No hits means the calls were dropped. One difference from the Babel plugin worth knowing: drop removes every console method, not just console.log. If you need to keep, say, console.error, use esbuild's pure option instead of drop.

[DocBouCou]

Thank you very much! :-)