An Introduction to JSPM (JavaScript Package Manager)
JSPM can handle installed packages, transpiling ES6, and bundling all from the command-line. This video gives a quick overview of install JSPM, installing packages with JSPM, writing a very simple app in ES6 that uses those packages, then bundling up for production.
[00:08] First just NPM, install globally JSPM, and once that's done, we can just install some modules into our current directory. I'll JSPM, install Moment and Lo-Dash. This will prompt me for my basic settings. I'll say "Yes" to everything, and explain these more in depth later. I'm going to select babel as my transpiler.
[00:30] What our project looks like now is a GSPM packages directory, a Config file and a package jason. So let's create a HTML file, call it index and show you how to use this. First we'll load system. js. Then we'll load the Config file, then we'll or import the file into system.js so system import, and we'll consider this file our main application
[01:10] We'll call it app and create a JavaScript file called app. So in this app file I immediately have access to the ES6 module system, and I'll just load a module Moment from Moment and Lo-Dash from Lo-Dash, and you can see I'm already using these ES6 features, and I have access to the modules that I installed.
[01:40] So I can say date equals Moment, format. So I can do something like a four each with Lo-Dash. I'll take the date and use the fat arrow from ES6 and just console, log out each character. So this is a very, very simple file just meant to demonstrate ES6 and loading in the modules that we installed.
[02:06] When I open this up in a browser, you can see that it logs out the date 2015, blah, blah, blah, each character individually. Now when it's time to ship it, I just say GSPM bundle SFX for self executing. I'll go ahead and minify it and just pass in my app js file as the main file of my project, and it builds out my file into build.js which I can now use in my HTML file.
[02:37] I can remove my system import, my configuration and system.js and just load my build file, and refreshing over here will give me the exact same thing.
[02:47] Just to prove there's nothing else going on, I will select all of this stuff, delete it, so I only have my HTML file and my build file, and you can see, I still have my entire project running. It loaded Moment, It loaded Lo-Dash, it used ES6 and printed out all this stuff. Everything just worked perfectly the same.