JSPM: 流暢的瀏覽器包管理器

banq發表於2015-01-08
JS瀏覽器
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 class="indent">


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 class="indent">


瀏覽器一旦開啟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 class="indent">

上面程式碼可以使用本地鎖定版本正常工作。

4.打包到生產環境的bundle:
jspm bundle app

jspm-test.html:

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

混合了ES6, AMD, CommonJS 和 globals等依賴打包到一個生產用檔案中。

相關文章