Compiling Bootstrap's JavaScript with Parcel

When I initially built this site, I incorporated Bootstrap’s JavaScript via a CDN. Recently, I audited the JavaScript functionality that the site uses and built the production bundle from source instead.

When choosing a bundler I decided on Parcel, which is a modern zero-configuration tool with less overhead, more features, and better usability than most other bundlers out there.

I’ll outline the few simple steps that are needed to use Parcel for bundling Bootstrap’s JavaScript, in case anyone else might be interested.

Installing Bootstrap & Popper

The source files for Bootstrap’s JavaScript (and CSS for that matter) are included in their NPM package. However for JavaScript compilation, the Popper JS library also needs to be installed as a peer dependency.

Using NPM, this can be done in your project’s root with the following commands:

npm install bootstrap
npm install @popperjs/core

Installing Parcel

Parcel can also be installed via NPM with the following command:

npm install -g parcel-bundler

Parcel is installed globally, which isn’t uncommon for most bundlers. If for some reason you cannot install global NPM packages, add it locally instead with npm install parcel-bundler --save-dev.

Parcel CLI Usage

Parcel’s command line syntax is similar to other bundlers and minifiers. On a basic level, it takes an input file as an argument and builds to an output file that is used for production.

Here’s the basic syntax for Parcel’s command line usage:

parcel build parcel.js --out-dir js --out-file bootstrap.js --experimental-scope-hoisting

The command can be broken down as follows:

parcel calls the CLI binary
parcel.js is the entrypoint (can be any filename; index.js is commonly used as well)
bootstrap.js is the compiled output (that you’ll reference in your HTML; can be any filename)
--experimental-scope-hoisting tells Parcel to do tree shaking and static referencing to reduce the total size of the compiled bundle, and increase performance

Importing Bootstrap Plugins

Bootstrap offers individual plugin files that can be imported for some or all of its JavaScript-related functionality.

Bootstrap’s documentation on using Parcel covers the different ways of importing one or more plugins in depth.

Based on the Bootstrap features I use, here are the contents of parcel.js for my own website as a quick example:

import { Button as Button } from './node_modules/bootstrap/js/src/button';
import { Offcanvas as Offcanvas } from './node_modules/bootstrap/js/src/offcanvas';
import { Collapse as Collapse } from './node_modules/bootstrap/js/src/collapse';
import { Dropdown as Dropdown } from './node_modules/bootstrap/js/src/dropdown';

NPM Script Usage

It’s a good idea to add the Parcel build command to your package.json file as an NPM script:

"parcel": "parcel build parcel.js --out-dir js --out-file bootstrap.js --experimental-scope-hoisting"

The build command can then be run with npm run parcel, or using the NPM scripts toolbar in VS Code. When run, Parcel will import, build, optimize, and output your JavaScript bundle file.

Adding JavaScript Bundle to HTML

The final step is to add the link to the bundled JavaScript file into your HTML. I always put Bootstrap’s JavaScript in the footer for ideal page-loading performance, and here’s the markup from my own website as an example:

<script type="text/javascript" src="../js/bootstrap.js"></script>

When compiled, the resulting JavaScript bundle is around 43KB and is further reduced to around 15KB when delivered with Brotli compression. Not bad at all.

Using Parcel to selectively bundle Bootstrap’s JavaScript results in a smaller JavaScript file that will not only contain the scripts your site actually uses, but will reduce the loading time of your website altogether.

06 Nov 2021 guides