Bundling takes a js or typescript project and bundles it into a single js file with optional minification or adding polyfills. It's different than simple concatenation. Instead you give a bundler your "main" file which should import your other files.
install
First, download and install the esbuild command locally.
npm install --save-dev esbuild
build
Your build command is something you will be running repeatedly, so you will want to automate it. A natural way of doing this is to add a build script to your package.json file like this:
{
"scripts": {
"build": "esbuild app.jsx --bundle --outfile=out.js"
}
}
The build script can be invoked like this:
npm run build
options
The bundler outputs code for the browser by default, so no additional
configuration is necessary to get started. For development builds you probably
want to enable source maps with --sourcemap, and for production builds you
probably want to enable minification with --minify. You probably also want to
configure the target environment for the browsers you support. All of that might
look something like this:
esbuild app.jsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16
watch
Enabling watch mode on the build API tells esbuild to listen for changes on the
file system and to rebuild whenever a file changes that could invalidate the
build. Using it looks like this:
esbuild app.js --outfile=out.js --bundle --watch