-
概述
本教程旨在為基於Nodejs npm生態圈的前端程序開發提供入門講解。
-
Nodejs是什么
Nodejs是一個高性能JavaScript腳本運行環境，內部基於Chrome V8腳本引擎。它相當於把在瀏覽器中執行JavaScript腳本的功能抽取出來，作為一個單獨的程序，可在桌面端命令行等環境中使用。
-
NPM是什么
NPM是nodejs包管理器(nodejs package manager)，目前已為全球最大的開源腳本倉庫。它管理着成千上萬的腳本程序庫。它也提供了一個可在nodejs環境中執行的工具包，為我們提供從倉庫中下載類庫，以及升級和卸載類庫的功能。
-
生態圈
可在npm中找到的類庫以及工具有很多。
但是我們對這些工具和類庫的選擇上應有取舍。本教程使用了以下工具或類庫。
-
環境搭建
-
安裝Nodejs&npm
-
我們首先從nodejs官網nodejs.org 下載nodejs安裝包，要選擇與自己系統相應版本(x86/x64)。
安裝時一路Next。
在選擇安裝組件時，我們能看到選項里有 nodejs運行核心這個是必須的，因為你需要它去運行腳本程序。
當然安裝包里也集成了npm，我們需要它來下載和管理類庫和工具包，這兩個我們都需要。
Add to path 這一項是將npm包路徑加到系統path中，這項也是很關鍵的，往往我們使用npm安裝了一個工具后，我們需要在cmd命令行中直接調用這個工具，那這個選項就需要了。
在安裝完成后，我們可以作簡單測試，在cmd中敲入node進入nodejs運行環境。
然后輸入一段腳本，查看執行情況。
-
使用VS Code
這里我們選用一個簡單的代碼編輯器VS Code，而非使用VS等功能強大的IDE。我們拋棄VS這些強大IDE的功能只為能更加深入的了解在前端開發所需的各種工具的構建機制。我們從vs code官網下載好安裝包，安裝之后，直接打開。
我們新建一個空的項目文件夾，在VS CODE中打開，我們可以使用快捷鍵ctrl+~ 來快速在本目錄中打開cmd命令行。
-
使用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定義文件。
-
更換NPM倉庫源
因為NPM在國外和我們國內網絡相關的緣故，可能會在npm install 從倉庫中下載包速度過慢。所以我們可以把npm的倉庫源切到我們國內的服務器中，我們可以通過下面的命令進行切換。
npm config set registry https://registry.npm.taobao.org
-
React和TypeScript
-
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腳本代碼。如下：
-
TypeScript介紹
TypeSciprt是一門腳本語言，它算是Javascript的增強版，它擴展Javascript的類庫，增加了面向對象特性。當然它最大的特點是兼容Javascript，它可以將自己的代碼編譯成Javascript代碼。
我們將它配置為開發時工具放於我們項目中使用，其主要目的是可以通過它的tsc命令將typescript編譯為javascript代碼。
TypeScript對Javascript的一些擴展：
-
Class 類
-
Enum 枚舉
-
Interface 接口
-
<T> 泛型
-
Namespace 命名空間
例如我們開發一個類，並使用了繼承，如下：
-
開始使用
我們現在將兩者結合使用，我們開發一個簡單一點組件，命名為：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文件。
-
加載運行
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等知識，教程中只是針對做了一個大體的概述。我們在以后的開發中，還需要通過各種渠道更加深入了解它們。