This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

An Introduction to JSPM (JavaScript Package Manager)

3:09 JavaScript lesson by

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.


egghead.io comment guidelines

Avatar
egghead.io

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.

Avatar
Martin

John, are you using gitbash or cygwin on windows? thx

In reply to egghead.io
Avatar
Kendrick

How do you incorporate pre-processing into the bundle process? Specifically, with angular you need to run ng-annotate on the code prior to transpile and minification. JSPM allows configure of a transpiler, but I need to pre-process those file first. Also, when using LESS, the *.less scripts need to be transpiled/concatenated into an app.css file. How can we incorporate these two pre-process events within the JSPM bundle functionality?

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.

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

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?