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: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.