摘要：讓為生產(chǎn)研發(fā)的使用準(zhǔn)備相關(guān)文件變得更容易。在這篇文章中，我們將重新創(chuàng)建和之前一樣的新的項(xiàng)目，但是我們使用。讓我們安裝其它我們將要使用的依賴包在這里我們沒有使用或者前綴，因?yàn)橛谐Ｓ冒淖?cè)表。

這是React和JSPM結(jié)合使用系列文章的第五篇。

下面是所有系列文章章節(jié)的鏈接：

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

React類、ES7屬性初始化（第二部分）

React類，方法綁定（第三部分）

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

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

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

本篇文章Github源碼

作為開發(fā)者在開始寫一個(gè)前端項(xiàng)目之前，我們還有很多必須要做的事情。你必須思考用什么JavaScript模塊裝載系統(tǒng)，gulp / grunt / npm ？你必須選擇CSS預(yù)處理工具，
你必須思考源碼集成和其它很多事情。

倘若我們不想有太多的麻煩而是想要在15分鐘之內(nèi)開始編碼。我們只需要提供一個(gè)工具即可。

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

JSPM允許你用不同的形式(ES6, CommonJS, AMD and global)加載JavaScript模塊。

它運(yùn)行你從npm or github注冊(cè)安裝相關(guān)依賴。

JSPM支持ES6+以上的語法

你可以毫無麻煩的加載CSS／圖片／字體和其它格式的文件，在一些插件的幫助下，這完全是可能的(本文稍微敘述)。

JSPM讓為生產(chǎn)研發(fā)的使用準(zhǔn)備相關(guān)文件變得更容易。

在這篇文章中，我們將重新創(chuàng)建和之前一樣的新的項(xiàng)目，但是我們使用JSPM。

給你推薦JSPM wiki,你可以從這里了解更多。

首先執(zhí)行下面的命令：

npm install jspm -g

JSPM將作為一個(gè)全局的npm模塊被安裝。安裝完畢以后，在我們系統(tǒng)中就可以使用jspm這個(gè)命令。

下一步，切換到你的項(xiàng)目路徑下面執(zhí)行jspm init命令，一直按enter按鈕按照默認(rèn)值安裝即可，安裝過程截圖如下：

安裝過程中，你需要等待一會(huì)兒，JSPM需要下載一些初始的依賴，并且會(huì)將這些依賴放到一個(gè)文件夾名字為jspm_packages的文件中。

通過JSPM使用jspm_packages文件夾就像jQuery / React / AngularJS etc.存儲(chǔ)和管理相關(guān)的包，最終將會(huì)被應(yīng)用到你的項(xiàng)目中，就像node_modules或者bower_components一樣。

jspm_packages有一個(gè)比較大的不同。JSPM可以從很多地方(Github / npm / bower)來存儲(chǔ)相關(guān)依賴，非常贊的是，你在的代碼里面，不管依賴包來自npm還是Github repository，你可以可以同等對(duì)待。

運(yùn)行完jspm init的將要產(chǎn)生的下一個(gè)文件是config.js。

首先，config.js提供我們安裝的依賴的版本配置。除此以外，你還可以對(duì)相關(guān)包重命名你喜歡的名字。

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

我們理解上面的內(nèi)容以后，接下來，執(zhí)行下面的命令：

jspm install npm:jspm-loader-jsx

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

接下來，你看看config.js文件，你將發(fā)現(xiàn)增加了下面這句代碼:

map: {
    ...
    "jspm-loader-jsx": "npm:[email protected]"
    ...
}

現(xiàn)在在我們的代碼中，我們將有可能使用這個(gè)模塊中的jspm-loader-jsx.讓我們來看看，如果我們不喜歡這個(gè)名字，我們?nèi)绾螌?b>jspm-loader-jsx名字替換成jsx。

執(zhí)行下面的命令：

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

我的插件將關(guān)聯(lián)到jsx，并且你可以在你的代碼中通過import jsx將其導(dǎo)入到你的代碼中。順便說一下，我們剛安裝的這個(gè)包是我們的項(xiàng)目所需的包。所以，不要?jiǎng)h除jspm-loader-jsx。

讓我們安裝其它我們將要使用的依賴包：

jspm install react react-dom

在這里我們沒有使用npm或者github前綴，因?yàn)?b>JSPM有常用包的注冊(cè)表。你也能夠添加一個(gè)包到這個(gè)注冊(cè)表中。

如果你想研究更深，你可以閱讀這篇文章。

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

在config.js文件中找到關(guān)鍵字babelOptions的地方，然后替換成下面的代碼：

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

這是需要讓Babel和類型屬性一樣支持所有的新特性。

該是寫代碼的時(shí)候了。

創(chuàng)建一個(gè)名字為app.jsx的文件，從這里拷貝代碼到app.jsx中。下一步創(chuàng)建cartItem.jsx文件，將這里的內(nèi)容拷貝到里面。我希望你對(duì)這里的內(nèi)容所有了解，如果不了解，可以看前面的幾篇文章。

創(chuàng)建index.html文件，并且從這里拷貝內(nèi)容到文件中，我相信你會(huì)對(duì)下面的代碼感興趣。

在JSPM中通過一個(gè)叫做SystemJS的庫(kù)來實(shí)現(xiàn)模塊動(dòng)態(tài)加載已成為可能。這個(gè)庫(kù)的作者是JSPM和SystemJS的作者，名叫叫做Guy Bedford。

在第一行，我們導(dǎo)入SystemJS，在第二行，我們導(dǎo)入config.js，SystemJS和config.js都是通過JSPM創(chuàng)建。通過System.import("app.jsx!"),我們添加入口文件app.jsx，然后再通過這個(gè)入口加載其它所有的東西。

到這里我們就基本完成了，現(xiàn)在在你的瀏覽器中打開index.html。你將看到下面的效果圖：

注意： !添加在app.jsx的后面，這是一個(gè)JSPM加載非JavaScript文件的約定。

在我們這篇博客中并沒有包含所有的JSPM的特性。

下面是我想給大家突出的比較顯著的一些特點(diǎn)。

JSPM支持不同格式的模塊。所以在同一個(gè)文件中使用ES6來加載一些require.js模塊是絕對(duì)合法的。

在JSPM中如果想了解更多關(guān)于模塊加載，請(qǐng)看這里。

例如：執(zhí)行下面的命令

jspm install css

導(dǎo)入到某個(gè)文件中：

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

閱讀更多關(guān)于JSPM插件的信息

使用其它一些工具你可以連接和減少一些源代碼。

Run the following command from application directory:

在你的項(xiàng)目文件夾下面執(zhí)行下面的命令：

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

你將有一個(gè)單一的很小的包含模塊和依賴褲的文件。

想了解更多關(guān)于生產(chǎn)環(huán)境的配置，請(qǐng)點(diǎn)擊這里.

Official JSPM website

JSPM wiki

SystemJS wiki

SystemJS Module Loaders

JSPM plugins

JSPM production workflow