3. - jspm is a package manager
- it supports the following registries:
- npm
- GitHub
- it extends the package.json config
- you can use it as easily as npm
- environment configurable:
- in development loads separate files
- in production creates a single bundle
4. ➜ angular2example npm install jspm --save-dev
➜ angular2example jspm init
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]:TypeScript
5. ➜ angular2example jspm i jquery
Updating registry cache...
Looking up github:components/jquery
ok Installed jquery as github:components/jquery@^2.1.4
ok Install complete.
https://github.com/jspm/registry/blob/master/registry.json
"jquery": "github:components/jquery"
6. ➜ angular2example jspm i materialize-css
Updating registry cache...
err Repo jspm:materialize-css not found.
Perhaps try jspm install npm:materialize-css.
warn Installation changes not saved.
7. ➜ angular2example jspm i npm:materialize-css
Looking up npm:materialize-css
Updating registry cache...
Downloading npm:materialize-css@0.97.5
...
ok Installed materialize-css
as npm:materialize-css@^0.97.5 (0.97.5)
Installed Forks
To inspect individual package constraints, use jspm
inspect registry:name.
ok Install complete.
8. ➜ angular2example jspm i
immutablejs=github:facebook/immutable-js
Looking up github:facebook/immutable-js
Updating registry cache...
Downloading github:facebook/immutable-
js@3.7.6
ok Installed immutablejs as github:facebook/
immutable-js@^3.7.6 (3.7.6)
To inspect individual package
constraints, use jspm inspect registry:name.
ok Install complete.
10. ES 6
export default class Helper {}
import Helper from 'helper';
CommonJS
class Helper {}
module.exports = Helper;
const helper = require('./helper');
AMD
define(['helper'], () => { /* ... */ });
require(['helper'], (helper) => {});
Universal dynamic module loader
11. load SystemJS itself
from jspm_packages
initialize SystemJS with
some initial settings
bootstrap application
jspm is SystemJS
default package manager
SystemJS is jspm
module loader
'./bootstrap.js'
is an entry JS point
https://cdnjs.com/libraries/systemjs
