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