Back to Homepage

Credit: public domain

Builds

Andrew Begel

If you're building anything more than just a static web page, build automation can be key to accelerating the development cycle of edit, run, debug. In today's activity, determine the following:

The simplest of build scripts can still have a lot of complexity. For example, here's an npm package.json file that Andy Ko uses to build his faculty web site which uses React and a variety of other dependencies:

{
	"name": "UWFacultyPage",
	"version": "1.0.0",
	"scripts": {
	    "build": "browserify -t [ babelify --presets [ react ] ] src/app.js | uglifyjs > build/app.js",
	    "watch": "watch 'npm run build' src"
	},
	"devDependencies": {
		"babel-cli": "^6.0.0",
		"babel-preset-es2015": "^6.3.13",
		"browserify": "latest",
		"watch": "latest"
	},
	"dependencies": {
		"babel-preset-react": "^6.5.0",
		"babelify": "^7.2.0",
		"react": "^0.14.0",
		"react-dom": "^0.14.0",
		"react-router": "^2.0.0",
		"history": "latest",
		"jquery": "^1.12.0",
		"bootstrap": "^3.3.6",
		"lodash": "latest",
		"uglify-js": "latest"
	}
}

When we execute npm run build, npm executes the command that we've named "build" above, which runs browserify. This is an npm package that first converts all of the JSX files in my source directly into JavaScript, then compiles all of the JavaScript files in all of those big source files into a single monolithic JavaScript source file, and then pipes that big file into uglifyjs, which minifies the big monolithic JavaScript file, shrinking variable names and removing unnecessary whitespace. All of this means that we only have to have a single JavaScript import in the main HTML file, and it's small, which accelerates page load.

Also note the watch command. It uses a command line utility called watch to run a build every time we edit a file in the src folder, so we always have a fresh build for manual testing.

You might not want or need all of the things above. You might also want more. What you do depends on the plans you've devised for coordination and testing.

For credit

Explain your build process to me or the TA for credit.