In this post I want to explain how these different tools interact with each other and what each of it does. If you are missing a tool, you would like to see explained in this post, please feel free to leave a comment below.
To install and manage multiple Node versions, nvm has become very popular. It also allows you to install any Node versions without admin permissions.
Package manager Package manager
npm (node package manager) is a tool, that usually comes with Node and is responsible for downloading "packages" from a central registry.
When it comes to runtime dependencies you need in your frontend (e.g. jQuery, lodash, Angular, React, etc.), there is bower. Bower is a package manager, focusing on the libraries, that are actually transfered to your users browser.
A lot of those frontend libraries are nowadays also available via npm and I've seen more and more projects moving away from bower and downloading those libraries also via npm to get rid of at least one of the tools in this jungle. Personally I also prefer downloading everything via npm and haven't used bower since mid 2015 anymore for new projects.
The project configuration of
npm is stored in the
package.json file in the project's root directory. It contains a list of all the dependencies, that npm should download for this project, some meta information about the project, like version, name and authors. You can also use npm to execute some scripts, that can be described via a
scripts object inside the
package.json. That way you can e.g. use
npm run test to run tests on your project, by placing a command into your
package.json, that will execute the tests.
Build systems Build systems
The two most popular task runners are Gulp and Grunt. Grunt uses a more configuration like approach whereas Gulp use the code over configuration approach. Some other tools, but not quite as widespread, in this category are Broccoli.js or Brunch.
All of these are bringing their own configuration file:
Usually the tools behind these plugins (e.g. the CSS preprocessor LESS) are plain node modules and every build system has its own wrapper around it, making the tool usable within the build system. All of the below mentioned tools are available in these build systems and can be used inside them to process your sources.
.babelrc file in the project directory or via passing options to it inside the build system you use.
ESLint and JSHint are linting tools, that will check your code for possible bad (or even buggy) code. They also offer options to enforce coding styleguides in your code.
To bundle all those files together there are mainly three famous tools: webpack, SystemJS and Browserify. SystemJS and RequireJS are both hybrid solutions, that can bundle your code during building or run in the browser and requesting module files on the fly. Though I've barely ever seen anyone using RequireJS as a bundler. From the projects I've seen in the last years and from GitHub stats, webpack kind of outruns the others.
require('module') called CommonJS or
import 'module' from the ECMASCript2015 specification. Those bundlers usually understand more than one syntax how modules can imported. They will get one or multiple input files and from there on include the modules/files, that are imported, into one (or multiple) output bundles.
Since the bundler is traversing your source code while bundeling and knows which files are actually in the output, the compiling — if you require a compiler as mentioned above — will now done be as part of this traversing. That's why e.g. webpack has several so called loaders to use Babel, TypeScript or CoffeeScript for compiling.
CSS Build Tools CSS Build Tools
Since the CSS as understood by browser out there is still kind of limited (e.g. older browsers don't have a support for variables, no support for functions, etc.), you will often see LESS or SASS as a richer CSS variant.
Those languages are enhanced CSS variants, which compile down to CSS. There are also tools like autoprefixer which help with better browser support by automatically prefixing your CSS (with
-ms, etc.) for the browsers, you want to support.
Building these files can either be part of your build system, which reads all
Miscellaneous tools Miscellaneous tools
There are also a wide range of other tools, around optimization, minification, quality checking, etc. that you can use in your build process. Some noteable mentions:
Since you have to link up a lot of this tools yourself to create a proper build process, there are generators and yeoman is the de facto standard.
Yeoman is a tool, that several people have written templates for, so that setting up a new project means just calling one command on the commandline which will then setup the project structure and create appropriated build files for you.
Personally I am not a big fan of yeoman. It generates a lot of codes inside your build process and have seen too many projects where people couldn't explain to me what specific parts of code inside their buildfiles does or if it is still needed at all. Also updating those build files is basically merging other git branches into it, which is far away from just updating a plugin inside a buildsystem and everything continues to work.
To build an up-to-date web project you will need several tools working together. I hope this article could help starters a bit to understand what these different tools do and how they are linked to each other.
If you think I have forgotten some noteworthy tools or you don't understand what the part of a specific tool is in this process, please feel free to leave a comment below.