jspm

一、简介

• JavaScript 模块的写法有几种，好比 AMD，CommonJS .. 还有标准化的 ES6 的写法 .. jspm 支持加载全部的用这些方法写的 JavaScript 模块
• 在你的应用里，如今就可使用 ES6 提供的标准写法 .. 至于怎么去载入模块能够交给 jspm 去处理 .. 也就是你只须要了解 ES6 的模块写法 ..
• jspm 仍是一个为浏览器上用的东西准备的一个包管理 .. 好比它可让你去从不一样的源去安装不一样的包 .. 默认的源有 npm ，还有 github .. 安装好你须要的包之后，在你的代码里，只须要一行代码，就可使用这些包提供的功能 .. 不用担忧其它的事情 . .
• 在开发的时候，jspm 可使用 Traceur 或者 Babel ，实时的在浏览器上编译 JavaScript ，把 es6 的代码编译成 es5 的代码 ..
• 在正式发布应用的时候，能够优化建立的模块，把模块依赖的东西打成一个包

二、安装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

三、安装包 jspm install

jspm install jquery=github:components/jquery jspm uninstall jquery

四、使用ES6模块, BrowserSync 使用

1. npm install -g browser-sync // 安装Node后，经过npm安装BrowserSync(自动刷新) 2. 使用BrowserSync： browser-sync start --server 开启服务

browser-sync start --server --no-notify --files 'index.html, app/**/*.js' 

五、打包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