Browser package management with modular dependency and version management. https://jspm.io
Build into a bundle or inject a flat dependency tree for flat multiplexing in production.
jspm install npm:voxel-demo
No package.json found, would you like to create one? [yes]:
Enter packages folder [jspm_packages]:
Enter config file path [config.js]:
Configuration file config.js not found, create it? [y]:
Checking versions for npm:voxel-demo
Downloading npm:voxel-demo@0.0.1
Checking versions for npm:gl-now
Checking versions for npm:gl-tile-map
Checking versions for npm:gl-vao
Checking versions for npm:gl-buffer
Checking versions for npm:gl-matrix
Checking versions for npm:ndarray
Checking versions for npm:ndarray-fill
Checking versions for npm:ndarray-ops
Checking versions for npm:ao-mesher
Checking versions for npm:ao-shader
Checking versions for npm:gl-shader
Checking versions for github:jspm/nodelibs
Downloading npm:gl-now@0.0.4
Downloading npm:gl-tile-map@0.3.0
Downloading npm:gl-buffer@0.1.2
Downloading npm:gl-matrix@2.0.0
Downloading npm:gl-vao@0.0.3
Downloading github:jspm/nodelibs@0.0.2
Downloading npm:ndarray-fill@0.1.0
Downloading npm:ao-shader@0.2.3
Downloading npm:ndarray-ops@1.1.1
...
The above populates a jspm_packages folder in the current directory, and generates a config.js file containing the SystemJS loader configuration.
We can load this demo with:
<!doctype html>
<script src="jspm_packages/system@0.6.js"></script>
<script src="config.js"></script>
<script>
System.import('npm:voxel-demo')
.catch(function(e) {
setTimeout(function() {
throw e;
});
});
</script>
npm install jspm -g
cd my-project
jspm init
No package.json found, would you like to create one? [yes]:
Would you like jspm to prefix its package.json properties under jspm? [yes]:
Enter packages folder [jspm_packages]:
Enter config file path [config.js]:
Configuration file config.js not found, create it? [y]:
ok Verified package.json at package.json
Verified config file at config.js
Sets up the package.json and configuration file.
jspm dl-loader
Downloading loader files to jspm_packages
Looking up github:ModuleLoader/es6-module-loader
Looking up github:systemjs/systemjs
Looking up github:jmcriffey/bower-traceur
es6-module-loader@0.8.js
system@0.8.js
traceur-runtime@0.0.58.js
traceur@0.0.58.js
ok Loader files downloaded successfully
jspm install npm:lodash-node
jspm install github:components/jquery
jspm install jquery
Any npm or Github package can be installed in this way.
Most npm packages will install without any configuration necessary. Github packages may need to be configured for jspm first. Read the guide here on configuring packages for jspm.
All installs are saved into the package.json, so that the jspm_packages folder and configuration file can be entirely recreated with a single jspm install call with no arguments. This is ideal for version-controlled projects where third party packages aren't saved in the repo itself.
The config.js file is updated with the version information and the version is locked down.
config.js), then load the modules:<script src="jspm_packages/system@0.4.js"></script>
<script src="config.js"></script>
<script>
System.import('npm:lodash-node/modern/objects/isEqual').then(function(isEqual) {
});
System.import('github:components/jquery').then(function($) {
});
System.import('jquery').then(function($) {
});
</script>
jspm install github:my/module.Read the guide on configuring packages for jspm here.
If you are having any trouble configuring a package for jspm, please just post an issue and we'll help get it configured.
jspm install jquery
Automatically downloads and sets the configuration map for the loader.
This is equivalent to writing:
jspm install jquery=github:components/jquery
The jspm registry just provides a mapping from a name into an endpoint package name.
The npm and Github endpoints are both served by CDN, which is automatically configured in jspm.
We can switch the CDN version with a single command:
jspm setmode remote
This updates the configuration to now load all the packages from the CDN directly instead of the jspm_packages folder. The app will still behave identically, but we retain the version-lock configuration.
Revert back to the local files with:
jspm setmode local
If using the CDN version, use jspm inject instead of jspm install. This will inject the configuration into config.js without
downloading the repo to jspm_packages, making it a quicker install.
jspm inject jquery
Looking up jquery in registry
Checking versions for npm:jquery
ok github:jspm/nodelibs@0.0.2 (0.0.2)
ok Injected jquery as npm:jquery@^2.1.1 (2.1.1)
ok Loader set to CDN library sources
ok Install complete
Inject locks down exact versions allowing for a stable development environment.
jspm update
All packages will be checked, and versions upgraded where necessary.
Use -f or --force with the install command to overwrite and redownload all dependencies.
Use -o or --override to force-set the package override for a package that needs extra configuration. See https://github.com/jspm/registry#testing-package-overrides.
Local linking allows linking local folders to be installed instead of using the remote versions of packages.
Linked packages still need to be linked into a full endpoint, package and version.
cd my-local-package
jspm link npm:pkg@1.2.3
ok Package linked.
cd ../my-jspm-app
jspm install --link npm:pkg@1.2.3
my-jspm-app gets a symlink to a globally linked version of my-local-package. But changes to my-local-package do require
running jspm link npm:pkg@1.2.3 again to update the link cache, as jspm runs build operations on the package when adding npm compatibility.
You may wish to create your own custom endpoints, such as a private npm repo.
This can be done with:
jspm endpoint create myendpoint jspm-npm
npm registry to use [https://registry.npmjs.org]:
Would you like to configure authentication? [no]: y
Enter your npm username: mynpmusername
Enter your npm password:
We now have an npm endpoint based on a custom registry and authentication which can be used as expected:
jspm install myendpoint:package
You can also configure these same options for the existing npm endpoint if using a local npm mirror:
jspm endpoint config npm
There are two main workflows for production:
jspm bundle app/main build.js
Creates a file build.js containing app/main and all its dependencies.
We can then load this with a script tag in the page:
<!doctype html>
<script src="jspm_packages/system@0.6.js"></script>
<script src="build.js"></script>
<script>
System.import('app/main')
.catch(function(e) {
setTimeout(function() {
throw e;
});
});
</script>
Note that bundles also support compiling ES6 code. To try out a demonstration of this, clone the ES6 demo repo here.
jspm bundle app/main - react + moment build.js
Creates a file build.js containing app/main and moment and all their dependencies, excluding react and all its dependencies.
Bundle commonality is currently in development here - https://github.com/jspm/jspm-cli/issues/133.
If you don't want to include the bundle with a script tag, but rather load it only when it is needed, we can do:
jspm bundle app/main - app/core main-bundle.js --inject
The above will create the bundle, then inject configuration to tell the SystemJS loader what modules should be loaded from the main-bundle.js file.
As soon as one of these modules is requested, the bundle is loaded dynamically.
The jspm CDN uses SPDY, optimal cache headers, and minified files, making this workflow suitable for production use.
The remaining performance issue is the round trip latency required to load deep dependencies, as we only find out the dependencies of a module once we have fetched that module, before fetching its dependencies in turn.
We can get around this by injecting the full dependency tree upfront into a dependency cache, so that all dependencies can be fetched in parallel.
jspm depcache app/main
The above will trace the full tree for app/main and inject it into the config.js depCache.
Now any imports will load the full tree in parallel, reducing the latency delay to one round trip.
To create an output distributable script file that can be used entirely on its own independent of SystemJS and jspm, we can use bundle-sfx.
jspm bundle-sfx app/main app.js
app.js contains a micro-loader implementation (1.4KB gzipped), converts all module formats into ES5 (including compiling ES6), and
maintaining bindings and circular references as with normal bundles.
jspm --help for command list.Apache 2.0
FAQs
Import Map Package Manager
The npm package jspm receives a total of 4,346 weekly downloads. As such, jspm popularity was classified as popular.
We found that jspm demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.