jspm

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