jspm

一、簡介

• JavaScript 模塊的寫法有幾種，好比 AMD，CommonJS .. 還有標準化的 ES6 的寫法 .. jspm 支持加載全部的用這些方法寫的 JavaScript 模塊
• 在你的應用裏，如今就可使用 ES6 提供的標準寫法 .. 至於怎麼去載入模塊能夠交給 jspm 去處理 .. 也就是你只須要了解 ES6 的模塊寫法 ..
• jspm 仍是一個爲瀏覽器上用的東西準備的一個包管理 .. 好比它可讓你去從不一樣的源去安裝不一樣的包 .. 默認的源有 npm ，還有 github .. 安裝好你須要的包之後，在你的代碼裏，只須要一行代碼，就可使用這些包提供的功能 .. 不用擔憂其它的事情 . .
• 在開發的時候，jspm 可使用 Traceur 或者 Babel ，實時的在瀏覽器上編譯 JavaScript ，把 es6 的代碼編譯成 es5 的代碼 ..
• 在正式發佈應用的時候，能夠優化建立的模塊，把模塊依賴的東西打成一個包

二、安裝jspm

npm install jspm -g 在全局範圍安裝jspm，就能夠在任何地方使用jspm命令了 jspm // 完成後輸入jspm，會返回一些幫組信息 cd ~/desktop mkdir reactProject // 建立項目文件夾 cd reactProject npm init // 建立package.json，一路回車便可 ls // 查看文件夾，就會一個package.json文件 npm install jspm --save-dev // 把 jspm添加到項目開發依賴 ls // node_modules package.json兩個文件 jspm init // 爲jspm建立配置文件config.js， 一系列問題，可一路回車 ls // 會發現有config.js , jspm_packages（jspm安裝的一些包） node_modules package.json

三、安裝包 jspm install

jspm install jquery=github:components/jquery jspm uninstall jquery

四、使用ES6模塊, BrowserSync 使用

1. npm install -g browser-sync // 安裝Node後，經過npm安裝BrowserSync(自動刷新) 2. 使用BrowserSync： browser-sync start --server 開啓服務

browser-sync start --server --no-notify --files 'index.html, app/**/*.js' 

五、打包bundle 功能

• 打開瀏覽器的開發者工具 .. 再打開 network 這個選項卡 .. 在這裏你會看到被下載的一些東西 .. 這裏有挺多 js 文件 .. main.js .. fruit.js ，jquery.js 等等 ..
• jspm 支持 bundle，也就是打包的功能，就是把一些資源打包成一個東西 .. 好比下面咱們去把 main.js 這個模塊打包成一個東西 ..

• 打包用的是 jspm bundle 命令

  進入項目目錄
  jspm bundle app/main app/build.js  // 將app文件夾下的main.js裏面的js都打包到build.js中 完成之後，會在 app 目錄下面建立一個叫 build.js 的文件 .. 回到編輯器 .. 用一個 script 標籤 .. 把 app 下的 build.js 嵌入進來 .. 保存 .. 再回到瀏覽器 .. 在 network 這個選項卡里，會少了不少 js 文件，由於咱們把它們打成了一個包 .. 就是這個 build.js ..

• 沒有打包

html_nobundle.png

bundle.png

js_noBundle.png

• 打包

  
  

  build.png
  
  

  js_bundle.png