Mark Brown looks at the state of modules in JavaScript and shows how, with the help of Browserify, Webpack & jspm, you can use them in your projects today.
lol, welcome to frontend development
“2015: JavaScript tool X was useful 2016: Make X easier to install/setup/use for all new users. Minimize dependency & configuration hell.”, @addyosmani
pick your poison knowing in 3-5 years you’ll have to choose all over ;)
The Present
It’s really really complicated. First, there’s a variety of module formats out there in use:
CommonJS
AMD
UMD
ES6 Modules
Tools for bundling assets come in a variety of shapes and sizes:
Browserify
jspm
Webpack
Rollup
Brunch / Brocolli
Sprockets
Build your own with Gulp / Grunt
Then there’s transpilers that you may want to use:
Babel for ES6
CoffeeScript
Typescript
In addition, there are various libraries that allow dynamic loading of modules:
Require.js
System.js
These are shortened lists of popular tools currently in use—it’s a minefield for beginners and experts alike. The cost of transpiling also highlights that you can mix and match a lot of these tools and get different results.