About using Babel and Vite, @rollup/plugin-babel status

[patak-dev]

We are close to having every official rollup plugin included in the Vite Rollup Plugins compatibility list.

Only three remains:

• @rollup/plugin-auto-install + vue
  There is an open PR for it

• @rollup/plugin-legacy in windows
  I sent a PR to the rollup plugins repo that fixes this issue if merged

• @rollup/plugin-babel

The babel plugin works correctly for vanilla. But I need help understanding how to do the setup when used with Vue.

Conceptually, even if it works, I do not know if it is a good idea to recommend using Babel with Vite. If people are using babel to support old browsers, that is covered already by @vite/plugin-legacy.
The only use case I see where it is useful is to try experimental features like the pipeline operator. But if we use babel for transpilation, wouldn't that slow down the dev server? In my opinion, I would only use experimental features if they are supported by esbuild (or there is an esbuild plugin for them).

I think I will label the @rollup/plugin-babel as compatible, and add a note or link to an explanation. Maybe it would be useful to add a note in the Vite docs about what is recommended with regard to Babel, as it would probably be a really common question (maybe in a new Q&A section?)

[yyx990803]

Agreed. I tested it myself and it does work, but the use case is rather rare. It is best to avoid Babel during dev as it brings major perf hits.

[patak-dev]

I've updated Vite Rollup Plugins to vite beta.58, including info about the babel plugin and updated @rollup/plugin-legacy to compatible now that they merged the path normalization.

Only @rollup/plugin-auto-install remains and every official rollup plugin is compatible, covered or n/a 👍🏼

[tianwang8090]

but @rollup/plugin-legacy does not support library-mode, still need to use babel

[zjjjjjjjjjjd]

但是@rollup/plugin-legacy不支持库模式，仍然需要使用babel

still unresolved in 2022 Aug

[DrSensor]

I wonder if esbuild has ability or plugin for macros transformation. babel-plugin-macros is something that indispensable in me for various shortcut and optimization. I mainly use it for effectful.js

[patak-dev]

There is a plugin system in esbuild https://esbuild.github.io/plugins, but it is fairly new so things are just started to get traction on that front. It is not clear yet how to achieve something equivalent to babel macros because of performance constraints (the AST is not exposed for example). I think you can still use babel-plugin-macros with Vite, the price per file during dev shouldn't be that big (at least while we wait for an esbuild based solution)

[LifeIsStrange]

I would like to concur with @DrSensor that macros are the killer feature of Babel that Vite is currently missing https://github.com/jgierer12/awesome-babel-macros
It really expand the realm of possibilities and of ergonomicity for common patterns