noyobo
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-esbuildandmake demo-three-esbuild-es5for comparison.
Install
npm install esbuild-plugin-es5 @swc/helpers -DUsage
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 }) => Es5PluginSWC Options : https://swc.rs/docs/configuration/compilation