Nodejs生態圈的TypeScript+React

標籤：資源   dex   put   還需要   dom   path   是什麼   好的   end   

 

基於Nodejs生態圈的TypeScript+React開發入門教程

 

 

1. 概述

本教程旨在為基於Nodejs npm生態圈的前端程式開發提供入門講解。

1. Nodejs是什麼

Nodejs是一個高效能JavaScript指令碼運行環境，內部基於Chrome V8指令碼引擎。它相當於把在瀏覽器中執行JavaScript指令碼的功能抽取出來，作為一個單獨的程式，可在案頭端命令列等環境中使用。

1. NPM是什麼

NPM是nodejs包管理器(nodejs package manager)，目前已為全球最大的開源指令碼倉庫。它管理著成千上萬的指令碼程式庫。它也提供了一個可在nodejs環境中執行的工具包，為我們提供從倉庫中下載類庫，以及升級和卸載類庫的功能。

1. 生態圈

可在npm中找到的類庫以及工具有很多。

 

 

但是我們對這些工具和類庫的選擇上應有取捨。本教程使用了以下工具或類庫。

 

 

1. 環境搭建
   1. 安裝Nodejs&npm

我們首先從nodejs官網nodejs.org 下載nodejs安裝包，要選擇與自己系統相應版本(x86/x64)。

安裝時一路Next。

在選擇安裝組件時，我們能看到選項裡有 nodejs運行核心這個是必須的，因為你需要它去運行指令碼程式。

當然安裝包裡也整合了npm，我們需要它來下載和管理類庫和工具包，這兩個我們都需要。

Add to path 這一項是將npm包路徑加到系統path中，這項也是很關鍵的，往往我們使用npm安裝了一個工具後，我們需要在cmd命令列中直接調用這個工具，那這個選項就需要了。

在安裝完成後，我們可以作簡單測試，在cmd中敲入node進入nodejs運行環境。

然後輸入一段指令碼，查看執行情況。

1. 使用VS Code

這裡我們選用一個簡單的代碼編輯器VS Code，而非使用VS等功能強大的IDE。我們拋棄VS這些強大IDE的功能只為能更加深入的瞭解在前端開發所需的各種工具的構建機制。我們從vs code官網下載好安裝包，安裝之後，直接開啟。

我們建立一個空的專案檔夾，在VS CODE中開啟，我們可以使用快速鍵ctrl+~ 來快速在本目錄中開啟cmd命令列。

1. 使用NPM

我們在命令列中敲入npm init 命令。此命令可以在項目目錄中建立npm包設定檔package.json，此檔案定義了這個項目所需要的各種模組，以及項目的配置資訊（比如名稱、版本、許可證等中繼資料）。

 

我們採用預設設定就可以，最終在項目根目錄會產生如下格式的設定檔。

 

以上配置為我們在產生的基本設定檔上做了部分補充。

下面我們來解釋package.json中常用配置欄位的用處：

 

• Main：main欄位指定了項目載入的入口檔案。如果你要從外部把我們項目作為一個模組類庫引用，則第一個執行的將會是入口檔案。預設的入口檔案名稱為index.js。
• Scripts：scripts欄位配置了可以用過npm run xx來啟動並執行指令碼命令。例如上面配置了一條tsc 的命令，我們可以調用 npm run tsc 來執行這條命令。Start命令是scripts中系統內建的一條命令，意思是我們可以通過調用npm start來啟動我們的項目。
• Dependencies：dependencies欄位指定了項目運行時所依賴的模組。
• devDependencies：devDependencies欄位指定了項目開發時所需要依賴的模組，它與dependencies欄位都指向了一個類庫和工具。改類庫或工具包括名稱和相應的版本。

 

因為systemjs和react是我們需要在項目運行時所需要用到的類庫，所以我們把他放到dependencies中。

因為lite-server和concurrently是我們在開發時所需要用到的工具，所以我們把他放到devDependencies中。Lite-server是一個在開發時的輕量級HTTP伺服器（相當於IIS提供的功能），concurrently是一個可以並存執行package.json scripts裡面指令碼的功能庫。

 

現在項目配置已經有了，要依賴的類庫和指令碼也已經加到設定檔了。我們現在需要將我們依賴的類庫或工具下載安裝到我們項目中使用。

Npm install 命令執行時會自動安裝我們package.json檔案中定義的依賴項。從這裡安裝的軟體包會以本地方式的來安裝，也就是說安裝的依賴包會自動放於本地項目根目錄下的node_modules檔案夾中。

 

Npm install 一次性安裝好我們package.json配置的類庫和工具後，我們還需要使用typescript和typings這兩個工具。而我們現在需要將這兩個工具安裝到全域目錄中。

我們在命令列中運行：

npm install –g typescript

npm install –g typings

npm會將這兩個軟體包安裝到全域目錄中，npm安裝分兩個位置：1.全域目錄參數中加 -g，2.本地目錄中

安裝完成後我們就可以使用typescript軟體庫提供的tsc命令，將ts代碼編譯成js，使用typings來下載那些沒有使用ts語言編寫的公用類庫的d.ts定義檔案。

1. 更換NPM倉庫源

因為NPM在國外和我們國內網路相關的緣故，可能會在npm install 從倉庫中下載包速度過慢。所以我們可以把npm的倉庫源切到我們國內的伺服器中，我們可以通過下面的命令進行切換。

npm config set registry https://registry.npm.taobao.org

 

1. React和TypeScript
   1. React介紹

React是一個前端mvvm架構，它可以使前端開發更加組件化，更加有利於前端控制項的維護和共用。

 

React與Npm並沒有必然聯絡。它只是將自己的程式碼封裝在npm倉庫發布了一份，方便使用者通過npm進行下載安裝，當然也是可以被其他可以運行在nodejs環境中的軟體包依賴使用的。

 

React幾大機制：

• 組件化

  React提倡以組件的思維來開發前端UI，通過將UI的各個部分拆分成組件，使用時將其組裝，這樣職責單一功能清晰，更加有利於代碼重用和後期的維護。

• 虛擬DOM

  為了達到對DOM控制的高效能和跨平台特性，React在HTML真實DOM上增加了一層虛擬DOM層。我們在對DOM進行操作時，操作會在虛擬DOM層中先進行比對計算，找到真正需要修改的DOM元素，再對真實的HTML DOM進行修改，這樣可以極大減少對真實DOM元素修改的數量和次數，從而提高效能。

• 狀態驅動，單向資料繫結

  React在對DOM元素的修改操作，總是由組件的狀態改變來驅動的。當組件內的狀態資料修改時，React會自動計算需要修改的DOM來進行修改。並且資料繫結是單向的，也就是說當使用者修改了頁面DOM元素的值，並不會直接反向的影響到組件內的狀態資料，只有當在這個DOM元素上綁定了相應的事件，通過這個事件來觸發狀態的修改，才可以更新群組件內的狀態值。

• JSX文法

  JSX文法是一種文法糖，它允許直接將HTML結構代碼寫在javascript指令碼中，將html代碼和javascript代碼混合寫在一起。如下：

  實際它最終通過編，譯之後得到的仍然是javascript指令碼代碼。如下：

   

1. TypeScript介紹

TypeSciprt是一門指令碼語言，它算是Javascript的增強版，它擴充Javascript的類庫，增加了物件導向特性。當然它最大的特點是相容Javascript，它可以將自己的代碼編譯成Javascript代碼。

 

我們將它配置為開發時工具放於我們項目中使用，其主要目的是可以通過它的tsc命令將typescript編譯為javascript代碼。

 

TypeScript對Javascript的一些擴充：

• Class 類
• Enum 枚舉
• Interface 介面
• <T> 泛型
• Namespace 命名空間

 

例如我們開發一個類，並使用了繼承，如下：

1. 開始使用

我們現在將兩者結合使用，我們開發一個簡單一點組件，命名為：HelloComponent

 

首先我們建立HelloComponent.tsx 檔案放於我們項目下的scripts目錄中。Tsx檔案說明檔案內部為使用了jsx文法的typescript指令碼代碼檔案。

 

然後我們將下面的代碼加入其中：

最終在瀏覽器中的執行效果如下：

 

我們對這段代碼作一個大體講解：

 

首先我們通過import 來引用react類庫

 

然後我們編寫一個自己的組件HelloComponent，此組件需要繼承與React.Component 組件類。此類為一個泛型類<TP,TS>，泛型參數中需要傳入兩個類型：TP為這個組件的屬性類型介面，TS為這個組件的狀態類型介面。TP定義了外部調用組件時可以為組件傳入的屬性。TS定義了組件內部狀態將具有哪些欄位。

 

我們在reder方法中編寫我們組件需要展示的html元素代碼，我們在input的value和span的顯示文本中都綁定了this.state.text欄位，這裡當state.text做過變更後，這兩個地方顯示的內容也會隨即進行修改。

 

現在問題是我們如何修改我們的狀態資料。這裡我們首先在組件的建構函式裡初始化了預設的狀態。State.text使用了外部傳入組件屬性initText值。其次我們在input中綁定了onChange事件，當此事件觸發時，我們也會修改state.text為input控制項的value值。這樣就達到了對state.text的修改，也就達到了介面顯示的修改功能。

 

 

TypeScript在編譯時間我們需要對它進行一些配置，我們在項目根目錄中增加tsconfig.json檔案，在檔案中加入以下配置代碼：

我們大體講解一下此配置中各欄位的含義：

• compileOnSave：啟用在儲存ts、tsx檔案時即編譯ts到js
• target：ts編譯到js的目標版本，我們一般用es5，方便做瀏覽器安全色
• module：ts編譯到js所用的模組方式，模組方式有多種(commonjs、amd等)，我們這裡使用nodejs的模組組織方式 commonjs
• moduleResolution：ts尋找模組所用的方式，有node和預設尋找方式。配置為node意思為TypeScript可以從node_modules中尋找ts模組。
• allowJs：是否支援識別js為ts模組
• jsx：指定當使用jsx文法編寫的typescript檔案tsx編譯到js時，所使用的方式，這裡我們選擇react，因為我們需要將jsx文法編譯成react javascript代碼。

 

好了，typescript的設定檔我們已經配置OK，我們在命令列中直接執行tsc命令將tsx編譯成js代碼檔案。

 

在編譯時間，我們發現編譯出錯，提示找不到模組react。

因為react不是使用ts語言編寫的，而且它也並沒有提供d.ts定義描述檔案，所以ts不能識別它為模組。這裡我們需要為它補充一個d.ts檔案，讓ts能夠識別它。

下面就輪到typings工具登場了。Typings工具的目的就是為那些沒有使用ts語言編寫的公用類庫下載相應的d.ts定義檔案。它有多個資料來源，可以從多種地方尋找我們需要類庫的d.ts檔案，並下載。

 

我們通過typings search react命令能看到與react相關的d.ts檔案在很多個資料來源都存在。這裡我們優先從dt資料來源中下載即可。

 

我們在命令列中敲入：

此命令typings會從 dt 資料來源中安裝react到我們項目中。

--global指定這個react.dt.s將作為我們項目全域定義來引用，將安裝到項目根目錄typings\globals目錄中。

--save指定安裝後，會將起記錄到typings的設定檔,typings.json中。我們在安裝完成後，會看到typings為我們在項目根目錄自動產生了此檔案。

 

React的定義檔案我們已安裝完成，現在我們再來執行tsc的編譯命令。這次編譯看到沒有錯誤提示，並在HelloComponent.tsx目前的目錄中產生了HelloComponent.js檔案。

1. 載入運行

React的組件我們已開發完畢，現在我們需要將它放於Html中展示出來。而在使用HelloComponent.js時，我們可以有多種引用它的選擇。我們沒有直接使用將其通過<script>標籤放於html中的方式，而是使用通過systemjs模組資源載入器來載入它。

 

原因有以下幾點：

• 介於我們在ts配置了是以commonjs模組方式產生的js，所以將其直接放到通過<script>標籤引用到html中將不能識別require等方法。
• Systemjs這類的模組載入器，能夠按需載入我們所需的模組，而且會很好的解決模組之間的依賴關係。

 

首先我們增加index.html到我們的項目根目錄中，代碼如下：

我們在html直接使用<script>標籤引用的js檔案只有system.js和system.config.js。我們在使用system.js時，需要通過一些配置讓它瞭解我們項目的構成等。

System.config.js的配置代碼如下：

我們在其中配置了我們使用的react和react-dom庫，以及require方法。配置中各選項的詳細說明需要到systemjs官網文檔中查看，我們在這裡不做具體講解。

 

好了現在一切就緒，我們在命令列中執行npm start。由於我們在package.json的scripts中配置了如下指令碼命令。

所以npm 會為我們並存執行tsc –w(此命令為ts可以開啟監控項目中的所有ts檔案，如果有變更，將會重新編譯) 和 lite http伺服器。

 

Lite http伺服器啟動後，會監聽一個連接埠，並在我們瀏覽器自動開啟一個頁面。

 

頁面中顯示的組件便是我們開發的HelloComponent組件。現在我們可以盡情的開始編寫更多的組件，並組裝使用他們吧。

 

本教程為基於nodejs生態環境下的前端開發react+typescript提供了一個入門基礎教程，教程中涉及到的react,typescript,systemjs等知識，教程中只是針對做了一個大體的概述。我們在以後的開發中，還需要通過各種渠道更加深入瞭解它們。

Nodejs生態圈的TypeScript+React