linux中JSPM安装使用教程

你可以把应用分割成小部分，每个小部分就是应用的一个模块，模块之间可以相互去使用。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 文件，下面是文件里的内容：

在页面上链接了 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 。