这是React和JSPM结合使用系列文章的第五篇。
@H_404_4@| React | JS |
|---|---|
什么是JSPM？
作为开发者在开始写一个前端项目之前，我们还有很多必须要做的事情。你必须思考用什么JavaScript模块装载系统，gulp / grunt / npm ？你必须选择CSS预处理工具，
你必须思考源码集成和其它很多事情。
倘若我们不想有太多的麻烦而是想要在15分钟之内开始编码。我们只需要提供一个工具即可。
JSPM(JavaScript包管理器)就是其中的工具之一。
@H_404_4@JSPM允许你用不同的形式(ES6,CommonJS,AMD and global)加载JavaScript模块。
它运行你从npm or github注册安装相关依赖。
JSPM支持ES6+以上的语法
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"
]
}
完成项目结构
该是写代码的时候了。
创建一个名字为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!';
生产环境构建
使用其它一些工具你可以连接和减少一些源代码。
Run the following command from application directory:
在你的项目文件夹下面执行下面的命令：
jspm bundle-sfx app.jsx! app.js --skip-source-maps --minify
你将有一个单一的很小的包含模块和依赖裤的文件。
想了解更多关于生产环境的配置，请点击这里.
参考文档
@H_404_4@| 扫码申请加入全栈部落 |
|---|
