Installing jspm is doe through npm:
npm install -g jspm
After installation we can scaffold a project, using the CLI offered by jspm, all we need to do is run:
It will create the packages.json, config.js files, plus the jspm_packages folder, since jspm is built on the installed SystemJS. SystemJS offers the possibility to dynamically load ES6 modules, CommonJS, and AMD modules using a unified interface.
After jspm init has finished we have the following structure:
The map property helps define shorter names for packages that can be used when importing modules.
We need to add two new files: index.html and myapp.js.
<!DOCTYPE html> <html> <head> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('./myapp'); </script> </head> <body> </body> </html>
console.log("System import worked!");
Please notice that in the HTML file we only wrote two script tags. The myapp.js file will be loaded dynamically by the ES6 module loader, which can be easily seen inside Chrome Developer Tools, Network tab:
The system.js, then the config.js loads as we have defined in the index.html. The es6-module-loader.js then loads automatically, because we were using System.import() method to load a module that loads the myapp.js file.
The big advantage of this can be seen when there are many modules inside a project, but from the server, ONLY the imported ones are loaded and the developer does not have to manually write and manage the order of the script tags in the HTML file.
Installing modules using jspm can be done the same way we did with npm:
After this, we can write: System.import(“angular”) and use it where we need it.