ESBuild with Webpacker < 6 in Rails. Bye Babel <3

environment.js

// DONT FORGET TO `yarn add esbuild-loader` !!!

// config/webpacker/environment.js
const { environment } = require('@rails/webpacker')
const { ESBuildPlugin } = require('esbuild-loader')

const esBuildUse = [
  {
    loader: require.resolve('esbuild-loader'),
    // What you want to compile to, in this case, ES7
    options: { target: 'es2016' }
  }
]

environment.loaders.get('babel').use = esBuildUse
environment.loaders.get('nodeModules').use = esBuildUse
environment.plugins.append("EsBuildPlugin", new ESBuildPlugin())

module.exports = environment

explanation.md

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/

Getting started

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!

How should I use ESBuild and your snippet?I currently use Webapcker 6 with:

//   /config/webpack/base.js
const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = {
  resolve: {
    alias: {
      react: "preact/compat",
      "react-dom": "preact/compat",
    },
    extensions: ["css"],
  },
  // plugins: [
  //   new BundleAnalyzerPlugin(),
};
module.exports = merge(webpackConfig, customConfig)

and

// /config/webpack/prod-dev.js
const webpackConfig = require('./base')

const { environment } = require("@rails/webpacker");
console.log(environment);   <--- "undefined"

module.exports = webpackConfig

I don't see where the module environment is used so webpack still compiles. I hope this question makes sense.

The keys I see in @rails/webpacker are [config, devServer, webpackConfig, baseConfig, rules, merge, moduleExists...] but not `environment.

./node_modules/.bin/esbuild --version => 0.12.2

@ndrean you don't use Webpacker at all with this solution, this is a (small) replacement for it

Hey! THanks for this!
I got an strange situation here

After doing the config I keep seeing a babel warning, its normal? Shouldnt it be replaced by esbuild?

[BABEL] Note: The code generator has deoptimised the styling of <path> as it exceeds the max of 500KB.