Demonstration of the jspm loader and CLI workflow for ES6 modules
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
jspm_packages
lib
.gitignore
README.md
config.js
package.json
test.html

README.md

jspm ES6 demo

This demo project demonstrates an ES6 jspm workflow:

  1. Write ES6 modules and load external modules from CDN

    • Clone this repo, and open test.html.
    • This HTML file runs System.import('lib/main').
    • We are dynamically loading jQuery from jspm.io's github endpoint (as defined in config.js), and running an ES6 module load.
    • See lib/main.js and lib/myclass.js for the ES6 module files being loaded dynamically in the browser.
  2. Install external modules locally instead of using CDN versions

    • Install jspm: npm install jspm -g.
    • In the repo, run jspm install.
    • With no arguments, dependencies are installed from the package.json. We could also do jspm install jquery for example.
    • Run jspm setmode local, then open test.html.
    • We are now loading jQuery from the locally installed version, no other configuration or code changes being necessary for this switch.
  3. Bundle into a single file for production

    • Run jspm bundle lib/main --inject.
    • This creates a file build.js containing all dependencies needed for lib/main to run; a source map is also created.
    • --inject adds the bundle definition to config.js; the appropriate bundle is then loaded automatically when a module is requested from it.
    • We could alternatively use <script src="build.js"></script> after SystemJS but before the import.
    • All code is now loaded fully compiled from the single bundle.

https://jspm.io