jspm.io

Frictionless browser package management

jspm loads any module format (ES6, AMD, CommonJS and globals) directly from endpoints such as `npm` and `github` over CDN for easy in-browser package management. The [SystemJS module loader](https://github.com/systemjs/systemjs), built on top of the dynamic [ES6 module loader specification](https://github.com/ModuleLoader/es6-module-loader), is used to load version-managed JavaScript modules from CDN. All module format dependencies are traced and sent with SPDY push along with suitable cache headers for optimal loading. At any point, use the jspm CLI tool to download packages locally and/or lock down versions. Switching between the CDN and locally downloaded packages is a single configuration change. <br> #### Getting Started **Include the SystemJS loader from jspm in the page:** ```html <script src="https://jspm.io/system@0.5.js"></script> ``` **Require a package module directly from the browser:** ```javascript // a specific module from the latest version of an npm package: System.import('npm:lodash-node/modern/collections').then(function(collections) { collections.max([1,2,3,4]); // 4 }); // a semver-compatible version of jquery: System.import('github:components/jquery@^2.0.3').then(function($) { }); ``` _These loading examples can be run from the browser development console in this page._ **Install the jspm CLI:** ``` npm install jspm -g ``` **Download flat version-managed packages with the jspm CLI:** ``` jspm install npm:lodash-node jquery@^2.0.3 ``` Include the local loader and generated `config.js` file: ```html <script src="jspm_packages/system@0.5.5.js"></script> <script src="config.js"></script> ``` The same code written in development using the CDN now runs locally with versions optimally-resolved and locked down. <br> <div class="loader-icon"></div> #### SystemJS jspm package management is designed around the [SystemJS ES6 specification-based loader](https://github.com/systemjs/systemjs). * RequireJS-style module loader with similar configuration and [plugin system](https://github.com/systemjs/systemjs#plugins). * Built on top of the [ES6 Module Loader polyfill](https://github.com/ModuleLoader/es6-module-loader), making it standards-compliant and future-friendly. * Write [ES6 modules today](https://github.com/systemjs/systemjs#loading-es6-modules) and use them in any browser, [building into AMD for production](https://github.com/systemjs/systemjs#compiling-es6-to-es5-and-amd). * Load AMD and CommonJS modules together in the same application. * Load global scripts with a dependency-managed global object. [Read more at the SystemJS project page on GitHub](https://github.com/systemjs/systemjs) _Note that SystemJS is built on the latest ES6 draft modules specification and may still be subject to change._ <br> <div class="cdn-icon"></div> #### CDN Endpoints & Registry **Endpoints** Endpoints provide collections of packages that can be downloaded through the CLI or served over CDN. When requesting a package directly by name, the main entry point is used from the package.json. For example - `System.import('github:twbs/bootstrap')`. Individual modules or asset files can also be requested from inside the package (`npm:repo/sub/module`). The following endpoints are currently supported: * **npm:** * _npm:repo@version_ -> _https://npm.jspm.io/repo@version.js_ * Most packages on npm will work naturally with full version management, with no further configuration necessary. * The NodeJS builtins are provided by the same libraries used in Browserify. * **GitHub:** * _github:name/repo@version_ -> _https://github.jspm.io/name/repo@version.js_ * Packages on GitHub get their versions from semver tag names (with or without a `v` prefix). * When a GitHub release for a given tag is provided, the release archive will be used instead of the repo. * GitHub packages will benefit from jspm configuration being provided through the package.json or an override. **Package Configuration** [jspm extends the package.json spec](https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm) with some new properties to understand how to treat packages. Configuration options include the main entry point, module format, files and ignore rules, minfication, transpilation from ES6 to ES5, map config and dependencies (when combined with a registry property). To provide configuration for existing libraries on GitHub or NPM without access to the underlying repo, the jspm registry provides a [package.json override service](https://github.com/jspm/registry#packagejson-overrides). _The endpoint server code will be open sourced to allow anyone to host an endpoint._ **Registry** The [jspm registry](https://github.com/jspm/registry) provides a convenience mapping from shortcut names such as `jquery` into full endpoint names `github:components/jquery`. **Version Management** The major requirement for version-management in the browser is **flat dependency management**, which is a completely different problem to the hierarchical dependency management used in npm. The key to making this possible is to use semver-compatibility to share dependencies as much as possible. 1. As packages are loaded, semver-compatible dependency sharing in the dependency tree will happen greedily. Any forks can be inspected by looking at `System.versions`. 2. For production, use jspm CLI to do version resolution and injection. Forks will be individually prompted for handling. Specifying a version is optional - when no version is present, the latest stable semver version is used, and if none is found, the master branch is used. _Always write dependencies within files without any version included (`require('jquery')` / `System.import('jquery')`). This way the latest stable version is used in development, and versions can also be automatically locked through injection of configuration by the jspm CLI._ The following version styles are supported: * _Latest stable version_: `npm:underscore` * _Latest major version_: `npm:underscore@1` * _Latest minor version_: `npm:underscore@1.5` * _Exact semver version_: `npm:underscore@1.5.2` The browser cache expiry for an exact version is much longer than the cache expiry for a latest version (1 hour). Tags and semver-compatible verisons can also be used: * _Load a branch or tag_: `github:components/jquery@master` * _Semver-compatible version_: `github:components/jquery@^2.0.3` <br> <div class="cli-icon"></div> #### jspm CLI * [Downloads modules and dependencies](https://github.com/jspm/jspm-cli#getting-started) from the jspm registry, npm or Github, with the SystemJS configuration file fully managed. * Alternatively it can [inject exact version configuration](https://github.com/jspm/jspm-cli#jspm-inject---using-the-jspm-cdn-in-production) for using the jspm CDN in production. * Because the CLI understands the loader, modular code works without the need for complex manual configuration. * Build [ES6 into ES5 transpiling ES6 modules into AMD](https://github.com/jspm/jspm-cli#building-application-code) and minify with source maps support. [Read the CLI documentation on Github](https://github.com/jspm/jspm-cli) <br> #### Sites Using jspm * [Hya.io](http://app.hya.io) * [Kickstrap](http://getkickstrap.com) * [adamkochanowicz.com](http://adamkochanowicz.com) [Add your site with a PR](https://github.com/jspm/jspm.io). <br> #### Next Steps [Join the Google Group](http://groups.google.com/group/jspm-io) to stay informed, engage in discussion, provide feedback or ask for support. If you'd like to contribute to jspm, have a look at the [current development roadmap](https://github.com/jspm/project/wiki/jspm-Roadmap) to see where you can get involved. If you are interested in being notified on future jspm announcements, sign up to stay informed here: <form class="signup-group"> <input type="text" class="signup" value="Notify me of future announcements"></input> <input type="submit" class="signup-submit" value="Sign up"></input> <div class="cog"></div> </form> Fork me on GitHub