I felt very happy when i saw the progress on bringing typescript decorators to vanillajs. I thought to give it a try in my vanillajs + vite application and bammmmm 💥 it broke 🤯 🙇♂️.
ESbuild, which comes with OOB of vite, doesn't support decorators yet 🙄 🤷
That only left me the option to go for babel but i don't want to get away from my love, vite 🥺
Then i found the vite-plugin-babel package and made few changes to vite config. It worked wohooooo 🤩
Here's the config:
import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';
export default defineConfig({
base: "./",
plugins: [
babel({
babelConfig: {
babelrc: false,
configFile: false,
plugins: [
[
"@babel/plugin-proposal-decorators",
{ loose: true, version: "2022-03" },
],
],
},
}),
],
server: {
host: true,
port: 3001,
open: "/",
},
});
That's it. This resolved my issue and i happily went on using decorators in javascript.
FYI, decorator proposal is in stage3 and one step behind of getting finalized.
Thanks for the read,
Kiran 👋 👋
Top comments (5)
Hi @kiranmantha, Kuba here from the team behind this tiny plugin. Thanks for using
vite-plugin-babel
and spreading a good word about it! :) Cheers! 🙌Great article, you got my follow, keep writing!
Thanks alot @naubit . 😊
Cannot start nuxt: Invalid plugin. src option is required: {"name":"babel-plugin","enforce":"pre"}
Can you provide me ur git repo.. I'll check it out