JS Module Loaders
The Lineup
- Asynchronous Module Definition (w/ RequireJS)
- Common JS (w/ BrowserifyJS)
- ES6 Modules (w/ SystemJS)
The Problem
- Complex dependencies are difficult to maintain
- Browser code does not inherently mix with Node
- Loading lots of script tags can be bed for performance
Require JS
= AMD
(Asynchronous Module Definition)
Require JS
This is what AMD looks like.
Require JS
The Good
- Lazy Loading allows for optimization
The Bad
- Many script tags can cause performance problems*
- Must maintain config for every file, including libs
- Enormous, unreadable module declaration
Require JS
*There exists tools to bundle RequireJS projects.
Browserify JS
= CommonJS
Browserify JS
This is what Common JS looks like.
Browserify JS
With Browserify, there's an extra step:
That will build the bundle that we reference in our html.
The Good
- Bundling is good for performance
- modules work with Node (CommonJS)
- Clean, familiar syntax
The Bad
- Must maintain config but only for 3rd party libs
- Despite source maps, can introduce debug troubles
Browserify JS
ES6 Modules
System JS
System JS +
= ES6 Modules
System JS
Demo Time
ES6 Module import/export
System JS
Default
Named Exports
Or
Then
The Good
- Separate scripts for dev is good for debugging
- Bundling for production is good for performance
- Syntax is consistent with ES6
- Works with any type of module
The Bad
- Script tags have to be different for production and dev which complicates builds a tiny little bit