esbuild-build-es5

Use the @swc/core transform to convert to ES5 for the esbuild plugin.

Features

• ✅ Support Tree Shaking
• ✅ Support Code sharing (eg: async generator function)
• ✅ Support Sourcemap
• ✅ Support custom swc options
• ✅ Support custom filter

Why?

esbuild does not support exporting in ES5 mode esbuild#297, so when our code needs to run on older devices, it must be converted to ES5. This plugin uses @swc/core to convert non-ES5 syntax to ES5 before bundling.

Performance impact

The swc conversion is introduced, the conversion steps are added, and the construction time is increased to a certain extent.

Project	esbuild	esbuild + es5Plugin
three.js	50ms	180ms

For a test example you can clone the current project and run make demo-three-esbuild and make demo-three-esbuild-es5 for comparison.

Install

npm install esbuild-plugin-es5 @swc/helpers -D

Usage

import { es5Plugin } from 'esbuild-plugin-es5';
import path from 'path';

await esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/index.js',
  plugins: [es5Plugin()], // # 1. Use esbuild-plugin-es5
  target: ['es5'], // # 2. Set the target to es5
  alias: {
    // # 3. Set the alias to @swc/helpers
    '@swc/helpers': path.dirname(require.resolve('@swc/helpers/package.json')),
  }
});

For a faster development experience, you can only use it in production mode.

Options

const es5Plugin= (options: { filter?: RegExp; swc?: SWCOptions }) => Es5Plugin

SWC Options : https://swc.rs/docs/configuration/compilation