Support for babel plugins

[RanzQ]

Just a feature suggestion. Instead of dropping babel-loader, it can be used together with esbuild-loader:

// define esbuild-loader
const esbuildLoader = {
  // These could be used for the patched babel-loader
  // test: /\.(js|mjs|jsx|ts|tsx)$/,
  // include: [paths.appSrc, ...optionalIncludes],
  loader: require.resolve('esbuild-loader'),
  options: esbuildLoaderOptions
    ? esbuildLoaderOptions
    : {
        loader: useTypeScript ? 'tsx' : 'jsx',
        target: 'es2015',
      },
};

// modify babel loader
const babelLoaderPrev = getLoader(
  webpackConfig,
  loaderByName('babel-loader')
).match.loader;

const { loader, options } = babelLoaderPrev;

const babelLoader = { loader, options };

// Only keep styled-components plugin, drop the rest
options.presets = [];
options.plugins = ['babel-plugin-styled-components'];

const babelEsbuildLoader = babelLoaderPrev;

// Switch to .use
delete babelEsbuildLoader.loader;
delete babelEsbuildLoader.options;

babelEsbuildLoader.use = [babelLoader, esbuildLoader];

Not sure how the api should look like, just added my own configuration to include styled-components plugin. It seems to work fine after esbuild has done all the heavy work.

Inspiration: https://news.ycombinator.com/item?id=26977799

[burhanuday]

It probably would diminish the improvements that esbuild-loader provides (this is the webpack loader this project uses) Read about it here - https://github.com/privatenumber/esbuild-loader#is-it-possible-to-use-babel-plugins

[RanzQ]

@burhanuday Well, we get most of the speed improvements since TS -> JS is handled by esbuild-loader. Also the minifier is replaced.

Running babel-loader for example with the styled plugin only is pretty light.

[Rishi500]

@RanzQ can you share webpack config using esbuild-loader and babel plugins together without using babel loader ?

[RanzQ]

I never said I'm not using babel-loader. It's in the example above. I use esbuild-loader in chain with babel-loader. You cannot use babel plugins with esbuild. They are babel plugins, not esbuild plugins.

The idea was share the tasks. TS transpiling is done using esbuild and some additions (styled-components) with babel. Babel can read the output of esbuild so we can do some light things there.