PHPer 學習React 之路--jspm篇

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文件


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章