This example illustrates how to bundle the Design System JavaScript with browserify and npm.

First, install the dependencies with npm:

npm install

Once you've done this, you can modify src/js/main.js and run the following command to build js/main.js and its complimentary source map:

npm run build:js

This example uses the following browserify plugins and transforms:

• The babelify transform uses Babel and the babel entry in package.json to convert the Design System JS from ES2015 to browser-friendly ES5. This is required, and it also allows you to write your own code in ES2015 because the transform is applied globally (rather than to each module individually).

• The mapstraction plugin, combined with browserify's --debug flag, writes a complimentary source map alongside the output file to enable debugging in supported browsers. You can disable this by removing the --debug and -p mapstraction arguments to browserify.

• The uglifyify transform compresses (or "minifies") the JavaScript with UglifyJS, which dramatically reduces the output file size. You can disable this by removing -g uglifyify from the browserify arguments.

See the browserify CLI docs for more information.

• You don't need to use babelify if you're just using require('uswds'), because our "main" field points to the built distribution.
• If you wish to import uswds submodules directly with browserify, such as require('uswds/src/js/components/accordion'), you should use babelify as a global transform.
• If you're using babelify (or another Babel-powered browserify transform) already, you can access the ES2015 entry point directly with require('uswds/src/js/start'). Note that you must either use the transform globally, or tell it not to exclude scripts in node_modules.