This gist will modify your babel-loader
in place to use esbuild-loader
instead. Also by default webpacker 5 and below compile your node_modules, so it also modifies the loader for that as well.
Esbuild is a super fast javascript transpiler built in Go. It also uses nice language like: targets: es7
so no more fighting with .browserslistrc
It will also auto transform syntax like: static values = {}
Heres a full list of transforms: https://esbuild.github.io/content-types/#javascript
Esbuild Loader: https://github.com/privatenumber/esbuild-loader
Esbuild: https://esbuild.github.io/
yarn install esbuild-loader
Then modify your config/webpacker/environment.js
to look as above.
Thats it! You can now delete your babel.config.js
and your .browserslistrc
and you can simply target an es{x}
version!
@geoffharcourt Its my current compromise short of swapping to https://github.com/ElMassimo/vite_ruby ! I hate the
.browserslist
syntax with a passion that burns inside of me. I also genuinely dont care for Babel. Glad it helped you! I was so frustrated trying to setup web components in a rails projects I just threw my arms up in the air and looked to see if Webpack supported ESbuild.I need to work on a port for Webpacker 6, but its still in beta so ill wait until everything is finalized.
All that to say, glad I could help!