esbuild-plugin-babel-flow

Esbuild plugin for transformation of code with Flow annotations

Esbuild plugins have limitations to allow developers to hook into every part of the bundling process. This is a deliberate attempt to prevent creating performance bottlenecks during bundling. Thankfully, Babel, a javascript code transformer allows you to transform code during the code loading event of the esbuild bundling process. esbuild-plugin-babel-flow under the hood uses babel's transform api and @babel/preset-flow to strip javascript code of flow annotations for safe execution in a javascript environment.

Install

npm install esbuild-plugin-babel-flow --save-dev

Usage

esbuild.config.js

esbuild
	.build({
		entryPoints: ['example.flow.js'],
		write: true,
		bundle: true,
		outdir: 'dist',
		plugins: [babelFlowPlugin()],
	})
	.catch(() => process.exit(1));

example.flow.js

// @flow

function foo(x: ?number): string {
	if (x) {
		return JSON.stringify(x);
	}
	return 'default string';
}

foo(55);

dist/example.flow.js

(() => {
	// example.flow.js
	function foo(x) {
		if (x) {
			return JSON.stringify(x);
		}
		return 'default string';
	}
	foo(55);
})();

package.json

{
	"type": "module",
	"scripts": {
		"start": "node esbuild.config.js"
	}
}

License

MIT