你可以把应用分割成小部分，每个小部分就是应用的一个模块，模块之间可以相互去使用。AMD，CommonJS 这些都是用在 JavaScript 上的模块格式。问题是模块格式太多了，你家用这种格式，另一家用另外一种格式，你自己也想选择一种格式，用不同格式创建的模块之间挺难用到一块儿。现在好了，模块格式已经有了标准，就是 ECMAScript 2015（ES6） 提供的模块写法。
你现在创建的 JavaScript 应用，就可以使用这种标准化的模块格式了。不过现在我们需要一种方法，可以让不同格式的模块能用到一块儿，因为你的项目很可能会用到第三方的东西，这些东西可能用的是不同的模块格式创建的，你不能等所有的东西都按照这套新的标准重新写一次。这就是 jspm 做的事，它是基于 SystemJS 创建的。你可以使用 ES6 的标准，导入模块或者创建自己的模块，jspm 可以帮你解决不同格式的问题。
jspm 还是一个包管理工具，可以安装来自不同地方的包，比如 npm，github，或者你自己定义的位置。
安装 JSPM
打开命令行工具，Windows 上用 Powershell，Mac 上用终端，确定你安装了 npm，然后执行：
npm install jspm -g
完成以后，测试一下 jspm 是否有效，输入：
jspm
创建项目
下面去创建一个简单的项目，理解一下 jspm 的作用，还有 ES6 模块。
# 创建目录 cd ~/desktop mkdir ninghao-workflow cd ninghao-workflow # 创建 package.json npm init # 本地安装 jspm npm install jspm --save-dev # 创建 config.js jspm init
执行 jspm init 以后，会问你一些问题，一路回车。完成以后，项目的目录下面会有下面这些东西：
config.js package.json jspm_packages node_modules
用编辑器打开这个目录，然后再去创建一个 index.html 文件，下面是文件里的内容：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<title>ninghao.net</title>
</head>
<body>
<script src="https://ninghao.net/jspm_packages/system.js"></script>
<script src="https://ninghao.net/config.js"></script>
<script>
System.import('main');
</script>
</body>
</html>在页面上链接了 system.js ，config.js ，另外还用了一个 System.import 导入了 main.js 这个模块，这里可以不用文件的扩展名 。下面去创建这个 main.js ，往里添加点东西：
'use strict';
console.log( 'ninghao.net' );
export default {};正常的话，你在浏览器的控制台上应该可以看到输出的东西。我们也可以使用 browser-sync 去给项目创建一个服务器。
browser-sync start --server --no-notify --files 'index.html, *.js'
安装包
你可以使用 jspm 安装来自 npm ，github 上的东西：
# 安装 npm 上的 underscore jspm install npm:underscore # 安装 github 上 components 的 jquery jspm install github:components/jquery
jspm 有一个 registry ，里面定义了一些常用包的简单形式，比如你想安装 jquery ，可以直接执行：
jspm install jquery
使用包
在项目的下面，再去创建一个 js 文件，名字是 fruit.js ：
'use strict';
import $ from 'jquery';
export function booth() {
$('body').text('苹果 桔子 梨');
}在这个文件里，使用了 ES6 的模块格式，用 import 导入了 jquery ，这样你就可以去使用 jquery 提供的功能了。我又定义了一个叫 booth 的函数，它里面用到了 jquery ，在页面上显示一些水果图标，注意函数前面用了 export ，意思是可以导出这个模块提供的东西，这里导出的就是 booth 这个函数。
打开 main.js ，我们可以导入 fruit.js 这个模块：
import { booth } from 'fruit';导入以后，可以执行一下来自 fruit.js 里的，被导出的 booth 这个函数：
booth();
正常的话，在浏览器上会显示一堆水果。
打包
jspm 也有打包的功能，比如我们去打包一下 main.js 这个模块：
jspm bundle main build.js --inject
意思是把 main.js 这个模块打个包，变成 build.js 。
评论
ES6 神马的太爽了
9 年 1个月 以前
另外，ES7更加爽
9 年 1个月 以前
月松给我们介绍介绍。
9 年 1个月 以前
有文档的了，大家看文档就好了
9 年 1个月 以前
哇擦，ES6都还没普及，7都出来了？
9 年 1个月 以前
现在可以有啥用啥。在 React 介绍的视频里，会用到 ES6 的一些东西。
9 年 1个月 以前
意思React和flux教程即将闪亮登场了咯？
9 年 1个月 以前
flux模式有很多问题，我们用redux，react+redux
9 年 1个月 以前
月松得帮我们介绍一下，哈哈。我看一大堆跟 react， flux 相关的东西。
9 年 1个月 以前
教程的话我没什么好推荐的，我就看的官方文档，和github上的代码示例，加上一些实践，就这样了
9 年 1个月 以前
6基本是定稿了，就等着各个浏览器去实现，7的话还在草案中，不过一些语法定了。现在为止几乎还没有浏览器支持，所以我们利用工具把我们写的ES6代码编译成ES5，既然是编译成ES5，那么我们用6还是用7是完全不受影响的。babel就是我们经常用的编译工具，而jspm或者webpack等工具集成了babel，所以在用jspm或者webpack的时候可以使用ES6
9 年 1个月 以前
所以说，能不能用ES6只是跟有没集成babel有关，跟什么react，jspm等等没有任何关系。只要是集成了babel，在任何地方都可以用ES6
9 年 1个月 以前
因为需要一个模块加载的东西，所以选择先用一下 jspm ，因为它基于 SystemJS 这个东西，可以兼容不同格式的模块。
9 年 1个月 以前
模块加载方面，webpack比jspm更加完善，jspm支持的webpack都支持，包括CommonJs、AMD、global，还有依赖注入等等
9 年 1个月 以前
哦，明白了。暂时先用着 jspm ，我再试试 webpack 。
9 年 1个月 以前
受教啦月松，我得去看看babel……
9 年 1个月 以前
做了几个简单的小视频，到时可以看一下。
9 年 1个月 以前
去了babeljs.io，主菜单第一个就是先学习ES2015....
9 年 1个月 以前
录了一些 es6 新功能的介绍，到时看一下，应该会有帮助 。
9 年 1个月 以前
罗雀：这本书可以在线看：leanpub.com/understandinges6
9 年 1个月 以前
哇哦，不错。谢谢！！
9 年 1个月 以前
flux模式有很多问题，我们用redux，react+redux
9 年 1个月 以前
index.html 中的两个js的引入路径可以改一下, 新手可能直接复制代码就运行了
9 年 3 周 以前
<script src="http://ninghao.net/%3Cstrong%3Ejspm_packages/system.js%3C/strong%3E"></s...
<script src="http://ninghao.net/%3Cstrong%3Econfig.js%3C/strong%3E"></script>这二个是什么回事。乱码？？？？？
9 年 3 周 以前
咦，还真是来。
9 年 3 周 以前
亲，看好你本地的路径有jspm_packages\system.js文件的+config.js文件 替换就可以了。
8 年 11 个月 以前
npm install jspm --save-dev
出现下面的错误！
npm WARN package.json ninghao-workflow@1.0.0 No description
npm WARN package.json ninghao-workflow@1.0.0 No repository field.
npm WARN package.json ninghao-workflow@1.0.0 No README data
9 年 3 周 以前
booth(); 这个在哪里执行啊！
9 年 3 周 以前
您稍等，最近会有个相关的视频 ：）
9 年 3 周 以前
'use strict';
import { booth } from 'fruit';
console.log( 'ninghao.net' );
booth();
export default {};
8 年 11 个月 以前
jspm bundle main build.js --inject
Building the bundle tree for main...
err Error on fetch for main.js at file:///Users/david/Desktop/ninghao-workflow/main.js
Error: ENOENT: no such file or directory, open '/Users/david/Desktop/ninghao-workflow/main.js'
at Error (native)
9 年 3 周 以前