kota's memex

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