ES6 Modules and Dependencies with JSPM

The Current Context

For some time now the JavaScript community has jumped on the ES6 bandwagon and started using it to develop their web applications. Even though browsers are racing to implement all of the ES6 specs, they are still found to be lacking. To overcome this, developers are using a number of tools and workflows to write clean and maintainable ES6 JavaScript apps.

To write an ES6 app today, you need a transpiler to convert your ES6 code to ES5. The most popular transpilers are Babel and Traceur. Next, you need a module loader to combine all of the modules into one usable. The module loader you choose depends on which module format you prefer.  The most popular choices are RequireJS for AMD, Browserify for CommonJS, and es6-module-loader for ES6 modules. In the end, you will have to minify the code and enable source maps for debugging.

You will also need a way download third party modules. Browserify takes a CommonJS module and transforms it into a browser-understandable version, so the obvious choice for downloading third party modules would be to use NPM. If, on the other hand, you’re using RequireJS, then you can use any package manager and configure Requirejs to find the files you need or you can use a tool like Bower so you don’t have to maintain that configuration. Finally, you can use a task runner like Grunt or Gulp to do all this work for you while writing code.

All in all, you need at least three separate tools: a transpiler, a module loader, and package manager.

Enter JSPM

JSPM is a JavaScript package manager that is able to load a number of different module formats: AMD, CommonJS,  and ES6 modules. It does this by using System.js, which in turn uses es6-module-loader to load ES modules. System.js is also able to load AMD and CommonJS modules.

It also comes with both Babel and Traceur to transpile your code. You can configure it to use whichever you prefer. Another nice feature of JSPM is it’s ability to download and install third party packages from it’s own repository, npm, or Github.

The Basics

Let’s start by installing it. This is done with npm:

$ npm install -g jspm

After the installation is done, we can initialize our new project. It will prompt you to answer some questions to help you configure the project.

$ jspm init

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

Now let’s install jQuery and load it into our app:

$ jspm install jquery

#index.html
<!DOCTYPE html>
<html>
<head>
    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('./index.js');
    </script>
</head>
<body>
</body>
</html>

#index.js
import $ from 'jquery';

console.log($.fn.jquery)

Now lad index.js in the borwser and open up the console:

> 2.1.4

JSPM can also bundle our app files:

$ jspm bundle-sfx index.js 
     Building the single-file sfx bundle for index.js...
ok   Built into build.js with source maps, unminified.

Conclusion

JSPM is the closest thing to an all-in-one tool for easily writing and maintaining modern web applications without getting tangled in the multitude of tools and workflows used nowadays to develop complex JavaScript applications. It also unifies the different types of module syntaxes and package managers available in the JavaScript community.

More details on JSPM can be found here.

Alexandru Pirjol

Alexandru Pirjol

Module Lead

Alexandru Pirjol is has been a Module Lead at 3Pillar Global for 2 years. He has over 6 years of experience in front-end web development. He also has experience working with JavaScript, CSS, JSON, HTML, AJAX, and XML.

Leave a Reply

Related Posts

4 Reasons Everyone is Wrong About Blockchain: Your Guide to ... You know a technology has officially jumped the shark when iced tea companies decide they want in on the action. In case you missed that one, Long Isl...
3Pillar Recognized as a Leading Experience Designer by Forre... Fairfax-based product development company named to its second Forrester report in 2018 FAIRFAX, VA (June 18) - Today, 3Pillar Global, a global cust...
3 Cloud Optimization Projects That Will Pay for Themselves i... AWS introduced 1,430 new features and tools in 2017, including 497 in the 4th quarter alone. This means that it can be a challenge for even the mos...
The Connection Between Innovation & Story On this episode of The Innovation Engine, we'll be looking at the connection between story and innovation. Among the topics we'll cover are why story ...
Go Native (App) or Go Home, and Other Key Takeaways from App... I just returned from my first WWDC. I feel like I learned more in a week at Apple’s annual developer’s conference than I have in years of actually dev...