这是React和JSPM结合使用系列文章的第五篇。

下面是所有系列文章章节的链接：

• React 、 ES6 - 介绍（第一部分）

• React类、ES7属性初始化（第二部分）

• React类，方法绑定（第三部分）

• ES6中React Mixins的使用（第四部分）

• React 和ES6 之JSPM的使用（第五部分）

• React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源码

什么是JSPM？

作为开发者在开始写一个前端项目之前，我们还有很多必须要做的事情。你必须思考用什么JavaScript模块装载系统，gulp / grunt / npm ？你必须选择CSS预处理工具，
你必须思考源码集成和其它很多事情。

倘若我们不想有太多的麻烦而是想要在15分钟之内开始编码。我们只需要提供一个工具即可。

JSPM(JavaScript包管理器)就是其中的工具之一。

• JSPM允许你用不同的形式(ES6, CommonJS, amD and global)加载JavaScript模块。

• 它运行你从npm or gIThub注册安装相关依赖。

• JSPM支持ES6+以上的语法

• 你可以毫无麻烦的加载CSS／图片／字体和其它格式的文件，在一些插件的帮助下，这完全是可能的(本文稍微叙述)。

• JSPM让为生产研发的使用准备相关文件变得更容易。

在这篇文章中，我们将重新创建和之前一样的新的项目，但是我们使用JSPM。

给你推荐JSPM wiki,你可以从这里了解更多。

JSPM + React 项目初始化

首先执行下面的命令：

npm install jspm -g

JSPM将作为一个全局的npm模块被安装。安装完毕以后，在我们系统中就可以使用jspm这个命令。

下一步，切换到你的项目路径下面执行jspm init命令，一直按enter按钮按照默认值安装即可，安装过程截图如下：

安装过程中，你需要等待一会儿，JSPM需要下载一些初始的依赖，并且会将这些依赖放到一个文件夹名字为jspm_packages的文件中。

通过JSPM使用jspm_packages文件夹就像jQuery / React / AngularJS etc.存储和管理相关的包，最终将会被应用到你的项目中，就像node_modules或者bower_components一样。

jspm_packages有一个比较大的不同。JSPM可以从很多地方(Github / npm / bower)来存储相关依赖，非常赞的是，你在的代码里面，不管依赖包来自npm还是Github repository，你可以可以同等对待。

安装必须的依赖包

运行完jspm init的将要产生的下一个文件是config.js。

首先，config.js提供我们安装的依赖的版本配置。除此以外，你还可以对相关包重命名你喜欢的名字。

Let’s understand what I mean by all that. Run this command:

我们理解上面的内容以后，接下来，执行下面的命令：

jspm install npm:jspm-loader-jsx

If you’ll take a look at config.js now you should see excerpt like below:

接下来，你看看config.js文件，你将发现增加了下面这句代码:

map: {
    ...
    "jspm-loader-jsx": "npm:jspm-loader-jsx@0.0.7"
    ...
}

现在在我们的代码中，我们将有可能使用这个模块中的jspm-loader-jsx.让我们来看看，如果我们不喜欢这个名字，我们如何将jspm-loader-jsx名字替换成jsx。

执行下面的命令：

jspm uninstall jspm-loader-jsx
jspm install jsx=npm:jspm-loader-jsx

我的插件将关联到jsx，并且你可以在你的代码中通过import jsx将其导入到你的代码中。顺便说一下，我们刚安装的这个包是我们的项目所需的包。所以，不要删除jspm-loader-jsx。

让我们安装其它我们将要使用的依赖包：

jspm install react react-dom

在这里我们没有使用npm或者github前缀，因为JSPM有常用包的注册表。你也能够添加一个包到这个注册表中。

如果你想研究更深，你可以阅读这篇文章。

config.js

Inside config.js find key named babelOptions and replace it with following lines:

在config.js文件中找到关键字babelOptions的地方，然后替换成下面的代码：

babelOptions: {
    "stage": 0,
    "optional": [
      "runtime",
      "optimisation.modules.System"
    ]
}

这是需要让Babel和类型属性一样支持所有的新特性。

完成项目结构

该是写代码的时候了。

创建一个名字为app.jsx的文件，从这里拷贝代码到app.jsx中。下一步创建cartItem.jsx文件，将这里的内容拷贝到里面。我希望你对这里的内容所有了解，如果不了解，可以看前面的几篇文章。

创建index.htML文件，并且从这里拷贝内容到文件中，我相信你会对下面的代码感兴趣。

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    System.import('app.jsx!');
</script>

在JSPM中通过一个叫做SystemJS的库来实现模块动态加载已成为可能。这个库的作者是JSPM和SystemJS的作者，名叫叫做Guy Bedford。

在第一行，我们导入SystemJS，在第二行，我们导入config.js，SystemJS和config.js都是通过JSPM创建。通过System.import('app.jsx!'),我们添加入口文件app.jsx，然后再通过这个入口加载其它所有的东西。

到这里我们就基本完成了，现在在你的浏览器中打开index.html。你将看到下面的效果图：

注意： !添加在app.jsx的后面，这是一个JSPM加载非JavaScript文件的约定。

其它的JSPM特性

在我们这篇博客中并没有包含所有的JSPM的特性。

下面是我想给大家突出的比较显著的一些特点。

通用的JavaScript模块的加载

JSPM支持不同格式的模块。所以在同一个文件中使用ES6来加载一些require.js模块是绝对合法的。

在JSPM中如果想了解更多关于模块加载，请看这里。

加载文本文件，CSS和其它资源

例如：执行下面的命令

jspm install css

导入到某个文件中：

import './some/style.css!';

阅读更多关于JSPM插件的信息

生产环境构建

使用其它一些工具你可以连接和减少一些源代码。

Run the following command From application directory:

在你的项目文件夹下面执行下面的命令：

jspm bundle-sfx app.jsx! app.js --skip-source-maps --minify

你将有一个单一的很小的包含模块和依赖裤的文件。

想了解更多关于生产环境的配置，请点击这里.

参考文档

• Official JSPM website

• JSPM wiki

• SystemJS wiki

• SystemJS Module Loaders

• JSPM plugins

• JSPM production workflow