Hello, System.js

Demonstrates a browser app development workflow using JSPM and System.js. See the rather silly end product here.

• Use ES6/7 language features via Babel
• Frictionlessly load ES6, CommonJS, and AMD modules in the same app.
• Load modules in other languages such as TypeScript
• Multiple loading strategies under one API.
  • individually, with external dependencies loading either from a same origin cache (jspm_modules) or from jspm.io HTTP/2 CDN, which proxies Github and NPM
  • as local factor bundles with arithmetic (jspm bundle)
  • as a monolithic/standalone bundle (jspm bundle-sfx)
• config.js is a single place to describe your current dependency tree, like Gemfile.lock in Ruby's Bundler. It allows locking/overriding versions and even mapping dependencies from other registries/module systems as needed. It's enormously useful. Unless you want to override something, JSPM will smartly manage this file for you.

Local development

Run

Just serve this directory via HTTP, like

npm install -g serve && serve

Install dependencies

export PATH=./node_modules/bin:$PATH
npm install

This just installs dev dependencies. App dependencies are still loaded from a remote CDN.

# switch to local mode
jspm set-mode local
jspm install

# back
jspm set-mode remote

Working with local copies of dependencies

Read about jspm link. You have to re-link each time you make a change. This gulp task provides a way to automate it.

Tests

To run the tests:

karma start

Setup is cribbed from the jspm-lib generator, and uses

• Karma test runner
• Mocha specs, Chai assertions
• karma-jspm to load test/app code using SystemJS.

SystemJS can inject mocked modules.

Bundle

While I am most interested in deploying without bundling (using the CDN), jspm can also create factor and self-executing bundles just like with Browserify and Webpack.

Create a self-executing bundle starting from the app/main entry point:

jspm bundle-sfx app/main bundle/main.js --minify

Future: Rename bundle → dist and use html-dist to create dist/index.html.