1、简介
- JavaScript 模块的写法有几种，比如 AMD，CommonJS .. 还有标准化的 ES6 的写法 .. jspm 支持加载所有的用这些方法写的 JavaScript 模块
- 在你的应用里，现在就可以使用 ES6 提供的标准写法 .. 至于怎么去载入模块可以交给 jspm 去处理 .. 也就是你只需要了解 ES6 的模块写法 ..
- jspm 还是一个为浏览器上用的东西准备的一个包管理 .. 比如它可以让你去从不同的源去安装不同的包 .. 默认的源有 npm ，还有 github .. 安装好你需要的包以后，在你的代码里，只需要一行代码，就可以使用这些包提供的功能 .. 不用担心其它的事情 . .
- 在开发的时候，jspm 可以使用 Traceur 或者 Babel ，实时的在浏览器上编译 JavaScript ，把 es6 的代码编译成 es5 的代码 ..
- 在正式发布应用的时候，可以优化创建的模块，把模块依赖的东西打成一个包
2、安装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
3、安装包 jspm install
jspm install jquery=github:components/jquery
jspm uninstall jquery
4、使用ES6模块, BrowserSync 使用
1. npm install -g browser-sync // 安装Node后，通过npm安装BrowserSync(自动刷新)
2. 使用BrowserSync： browser-sync start --server 开启服务
5、打包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
