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

基於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等知識，教程中只是針對作了一個大致的概述。咱們在之後的開發中，還須要經過各類渠道更加深刻了解它們。