JSPM: 流畅的浏览器包管理器

15-01-08 banq
         

JSPM: jspm.io - Frictionless Browser Package Management是基于SystemJS的Javascript包 package管理器,基于动态的ES6模块加载器之上构建。

可以从端点如npm和github基于平行版本的依赖管理方式加载任何格式(ES6 AMD CommonJS)的模块。

对于生产环境,使用jspm CLI工具下载包到北地,锁定版本,构建进入一个bundle。

在开发阶段,直接从CDN加载模块,只要简单配置,同样的代码就能切换到生产环境。

1. 在浏览器页面从jspm加入SystemJS加载器:

jspm-test.html:

  
    // import 'app.js' from the current URL
    System.import('~/app').catch(console.error.bind(console));
  
<p>

2.从Github npm或jspm注册地require模块:

以CommonJS 代码为案例app.js:

 var collections = require('npm:lodash-node/modern/collections');
  var $ = require('github:components/jquery');

  $(document.body).html(collections.max([1,2,3,4]));
<p>

浏览器一旦打开jspm-test.html页面,所有模块都通过github或npm加载进来。

3.安装本地包,锁定版本:

jspm install github:components/jquery npm:lodash-node

jspm-test.html:

  
  
    System.import('~/app').catch(console.error.bind(console));
  
<p>

上面代码可以使用本地锁定版本正常工作。

4.打包到生产环境的bundle:

jspm bundle app

jspm-test.html:

  
  
  
    System.import('~/app').catch(console.error.bind(console));
  
<p>

混合了ES6, AMD, CommonJS 和 globals等依赖打包到一个生产用文件中。