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, 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