Skip to content

Latest commit

 

History

History
53 lines (41 loc) · 2.48 KB

README.md

File metadata and controls

53 lines (41 loc) · 2.48 KB
Raw

Using the Design System with browserify

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.

JS bundling guidance

  • 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.