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

zzbo 发布于2019-08-20 17:59 / 2570人阅读

摘要：让为生产研发的使用准备相关文件变得更容易。在这篇文章中，我们将重新创建和之前一样的新的项目，但是我们使用。让我们安装其它我们将要使用的依赖包在这里我们没有使用或者前缀，因为有常用包的注册表。

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

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

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

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

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

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

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

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

本篇文章Github源码

React	JS

什么是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文件，并且从这里拷贝内容到文件中，我相信你会对下面的代码感兴趣。

在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

扫码申请加入全栈部落

专线服务服务器托管 react使用webrtc 深度学习部分和 JSPM 服务器的使用和维护

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83980.html

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

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

Mr_houzi 2019-08-20 17:59 评论0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

Pink 2019-08-05 11:35 评论0 收藏0
React 和 ES6 工作流之 Webpack的使用（第六部分）

摘要：在上面的列表中，是自解释型的。我们将使用后者。调整文件的内容到这一步，这个应用就具备热刷新的功能。下一步，更新文件中的到现在为止，如果你在控制台运行压缩文件将被创建并且放在路径下面。这是React和ECMAScript2015系列文章的最后一篇，我们将继续探索React 和 Webpack的使用。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） Rea...

yunhao 2019-08-01 17:10 评论0 收藏0
React类，方法绑定（第三部分）

摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始...

livem 2019-08-20 17:59 评论0 收藏0
ES6中React Mixins的使用（第四部分）

摘要：在的组建创建中，不太可能使用混合机制。在中，这个组建将被命名为。他们中的其中一个如下结论高阶组建功能强大和极具表现力。现在高阶组建广泛的被使用来替代老式的句法。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第四篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类...

Karrdy 2019-08-20 17:59 评论0 收藏0