jspm的使用、es6模块开发教程

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