1. 上一篇文章中主要學習了babel編譯工具,該篇博客主要學習jspm工具。
2 . jspm簡介 :
jspm (javasript package manager 的簡稱);主要用來安裝一些js包(或者說組件),比如bootstrap/jQuery/css/react/react-router/antd 等;jspm是專業的js包(組件)管理工具,它的下載源主要是gitHub和npm。
jspm 包管理工具,類似通過npm來管理包的功能類似。
如npm install react --save (通過npm來安裝包/組件) 等價於 jspm install react --save-dev
npm unstall react 等價於 jspm uninstall react
3. 安裝jspm工具:
(1)全局安裝:npm install jspm -g
(2)局部安裝(在項目中安裝jspm指令):npm install jspm --save-dev
(3)初始化(創建config.js配置文件): jspm init 會在項目目錄下,創建一個config.js配置文件(一路回車)
(4)安裝/卸載/打包:如下
4 . jspm 指令:
(1)安裝 包/組件
jspm install 包名 [=github:components/jquery(手動指定安裝源) ]
或者
jspm install github:components/jquery
jspm install npm:components/jquery
(2)卸載包: jspm uninstall 包名
(3)打包:把一些js文件打包成一個js文件;假如A.js文件中,引入了b.js文件,b.js文件中,引入了c.js文件;如果不打包的話,瀏覽器會請求三個js文件,分別是:A.js/b.js/c.js文件。如果直接打包A.js文件的話,它會把A.js/b.js/c.js這三個文件打包成一個js文件,瀏覽器只請求一個打包好的js文件就可以了。(這種打包方法可以被稱爲 : 依賴打包)
jspm bundle 單一入口js文件 目標文件
a . 手動引入打包後的文件:
單一入口 index.html 文件中 的代碼爲:
<script src="jspm_packages/system.js"></script> //引入system類
<script src="config.js"></script> //引入jspm的配置文件
<script src="打包後的js文件"></script>
b . 自動引入打包後的js文件
在打包的時候,加上--inject 參數,這個參數的作用:把打包後的js文件的信息(如文件的路徑和名稱)寫入到config.js文件中
jspm bundle 文件 目標文件 --inject
單一入口 index.html 文件中 的代碼爲:
<script src="jspm_packages/system.js"></script> //引入system類
<script src="config.js"></script> //引入jspm的配置文件,config.js文件中已經包含了打包後的js文件