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

zzbo 發布于2019-08-20 17:59 / 2737人閱讀

摘要：讓為生產研發的使用準備相關文件變得更容易。在這篇文章中，我們將重新創建和之前一樣的新的項目，但是我們使用。讓我們安裝其它我們將要使用的依賴包在這里我們沒有使用或者前綴，因為有常用包的注冊表。

這是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

掃碼申請加入全棧部落

GPU云服務器云服務器 react使用webrtc 深度學習部分和 JSPM 服務器的使用和維護

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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...

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