This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

A Note About Package Managers

• Bower
  • (+) Good package manager
  • (-) But it doesn’t take care of dependencies when you want to inject scripts in html
    • There are plugins that you can use like wiredep
  • (-) It doesn’t have a concept of module loading (since it was developed before ES6 modules)
• npm
  • (+) Good package manager
  • (+) Easily require modules inside any program
  • (-) Uses CommonJS instead of ES6 modules
• jspm
  • (+) Good package manager
  • (+) Easily import modules inside any program
  • (+) Uses ES6 modules

Concepts

• ESM: ES module format. It specifies the syntax for defining the contents of a module and importing/exporting stuff from within them. It doesn’t specify how to load modules.
• ESMLP: ES module polyfill that follows the spec of the original module loader spec that was part of ES6 but which was removed. The ESML is being worked on in a different spec today.
  • the core idea of using ESMLP is that you’re using a system that is not proprietary but that it tries to be as faithful as possible to what will be the final spec that will run in all browsers.
  • You cannot load modules today using a script tag, you must do it via the ESMLP or other propietary loaders.
  • A common practice is to group modules into bigger modules sometimes called packages. Where the whole package exposes a unified API to the rest of the world via one single module name. Generally this will be achieved by importing and exporting from a bunch of modules within an index.js file. (For instance, take a look at @angular/core in Angular 2).
• Package managers: They help you manage packages by retrieving, installing and organizing them. Examples are npm, bower, jspm, etc

Loader Pipeline

• System.import: Used to import modules
  • System.import has hooks for the loader pipeline
  • normalize & locate: get a name and locate its module
  • fetch: fetch the module
  • translate: transpilation, etc
  • instantiate: create instance of module