frontend-js-build

Frontend JavaScript workflow with toolset:

• watch
• make
• browserify
• uglifyify
• brfs
• exorcist

Supported features:

• CommonJS-based JavaScript modules.
• Single bundled and minified JavaScript file.
• Same bundle for development and production.
• Source Maps.
• Project-local toolset.

Project structure

• Makefile - build rules, not very abstract but give the idea how tools work.
• package.json - contains local NPM dependencies.
• public/js/app/app.js - the entrypoint JavaScript file.
• public/js/bundle.js - the JavaScript bundle.
• public/js/bundle.js.map - Source Map file for the JavaScript bundle. Loaded by the browser when the debugger is open.
• public/misc - directory containing miscellaneous files included in the bundle.

Tools

The following tools are used:

• make - the build tool.
• watch - triggers periodic builds.
• browserify - converts CommonJS-based JavaScript modules into a bundle file.
• uglifyify - Browserify plugin that minifies the bundle code.
• brfs - Browserify plugin that embeds non-JS files into bundles.
• exorcist - extracts the source map and places it into a separate file.

Installing tools (assumes that make and watch are already installed):

npm install

Build targets

• all - builds bundle.
• clean - removes bundle.

Building periodically (2s):

watch make

Build dependencies

Due to Makefile specifics, dependencies have to updated manually when creating new directories under public/js.

Current dependencies:

$(BUNDLE): public/js/app/app.js public/js/app/*.js

Adding a directory something under app requires the following change:

$(BUNDLE): public/js/app/app.js public/js/app/*.js public/js/app/something/*.js

This is because make cannot handle recursive file patterns. The main entry point public/js/app/app.js must come as the first dependency.

Notes

The Makefile contains .DELETE_ON_ERROR: which causes it to remove the target file when build fails. This is a workaround to browserify/browserify#899.

What is not included

• Testing. Many approaches and tools to choose from.
• Linting. JSLint vs JSHint vs ESLint.
• ES6. Could be added with the babelify Browserify transform.
• CSS. Many tools to choose from (Less, Sass, SCSS, Stylus, ...).

Alternative choices

• uglifyify+exorcist can be replaced with the minifyify transform.
• webpack provides integrated solution for all of this.

License

The MIT License.