jspm - browser package manager

jspm is a package manager for SystemJS, made on the basis of the ES6 module loader
Allows you to download all module formats (ES6, AMD, CommonJS and Globals) directly from npm or Github with dependency management. Also allows you to use any non-standard sources of modules implemented through the Registry API
In development: Loads the ES6 modules as separate files, and compiles them directly in the browser.
In production: Assembles modules into one or more bundles, with a single command to run the entire application.

Let's start

Install jspm cli

npm install jspm -g

Create a project

  cd my-project npm install jspm

It is also recommended to locally install jspm in order to fix its version for this project. This will preserve the behavior of your application if the global jspm is updated. To verify the local version, run jspm -v.
')
Create a configuration for the new 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) [/]: Which ES6 transpiler would you like to use, Traceur or Babel? [traceur]:

This will create a package.json file and a configuration file. Also, jspm init starts automatically if you install jspm in an empty project.

baseURL - path to the root folder of your http server (public) relative to the package.json file. By default, this is the same folder as package.json itself.
jspm packages folder - the folder where jspm will install all external dependencies.
Config file path - configuration file for your application. Must be in baseURL and is included in the version control system.
Client baseURL - public folder URL for browser
Transpiler - used transpiler. This option can be changed at any time with the jspm dl-loader --babel command (traceur by default). For more fine-tuning, babelOptions and traceurOptions can be defined.

If you ever need to change any of these settings, you can directly edit package.json and your application will pick up the new settings when you run jspm install or jspm init.

Install any packages from the jspm, Github or npm repository

  jspm install npm:lodash-node jspm install github:components/jquery jspm install jquery jspm install myname=npm:underscore

Installation of several packages can be combined into one line separated by spaces.

Any npm or Github package can be installed in this way.

Most npm packages will install without any additional configuration. This happens because the npm repository applies a transformation based on the dependency resolution system Node require (from the translator - meaning it ) - this makes Node and packages in the npm style compatible with jspm.

Github packages may need some configuration before using jspm ( details , eng.)

The names of all installed packages are saved in package.json - thus, the jspm_packages folder, as well as the configuration file, can be completely restored by one jspm install command. This is an ideal solution for those who use version control systems and do not want to place third-party packages in their repository.

In the file config.js, information about dependency versions is placed and version numbers are recorded. Thus, the config.js file becomes a version fixer and it has to be added to the version control system (from the translator - some analogue of rails Gemfile.lock).

We write application code

Now you can start creating separate modules (including modules of the ES6 format), for example, in the lib folder:

lib / bootstrap.js

  import _ from 'lodash-node/modern/lang/isEqual'; import $ from 'jquery'; import underscore from 'myname'; export function bootstrap() { // bootstrap code here }

lib / main.js

  import {bootstrap} from './bootstrap'; bootstrap();

Run our application

HTML pages should include automatically downloaded with jspm init - SystemJS loader, as well as a configuration file, after which we import the main module of our application:

  <!doctype html> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script> System.import('lib/main'); </script>

We start the local server and look at our page.

Assembly for production

Run the following command in the console and refresh the page in the browser:

  jspm bundle lib/main --inject

All our application was bundled into one bundle.js. Alternatively, you can use

 jspm bundle-sfx lib/main

This will create a single file for the entire application, which can be used in the script tag without using config.js and system.js.