搭建Typescript+React專案模板(1) --- 專案初始化

React TypeScript · 發表 2018-09-27 15:42:27

摘要：因為模板是為以後專案開發所準備的前奏工作，所以在搭建之前我覺得首先需要先考慮以下幾個方面: 開發體驗專案打包團隊規範那麼這一篇就先做個起手式，先搭建一個簡單的可以跑起來的架子起手安裝前置安裝首先需要全域性安裝typescript，這...

因為模板是為以後專案開發所準備的前奏工作，所以在搭建之前我覺得首先需要先考慮以下幾個方面:

開發體驗
專案打包
團隊規範那麼這一篇就先做個起手式，先搭建一個簡單的可以跑起來的架子

起手安裝

前置安裝首先需要全域性安裝typescript，這裡預設大家都已經安裝了node以及npm npm install -g typescript
首先新建資料夾並進入 mkdir ts-react && cd ts-react
然後進行初始化，生成 package.json 和 tsconfig.json npm init -y && tsc --init
安裝開發工具這裡包含有 webpack4, webpack-cli, webpack-dev-server npm install-D webpack webpack-cli webpack-dev-server
安裝react相關因為需要整合ts，而react原本的包是不包含驗證包的，所以這裡也需要安裝相關ts驗證寶 npm install -S react react-dom npm install -D @types/react @types/react-dom
安裝 ts-loader (或者 awesome-typescript-loader ) 這兩款loader用於將ts程式碼編譯成js程式碼，用法上差異較小，這裡選擇的是 awesome-typescript-loader npm install -D awesome-typescript-loader

這個時候基本的安裝步驟就完成了，以後需要什麼再陸續新增進去，現在開始建立專案

專案啟動

webpack配置
1. 在專案根目錄新建一個 build 資料夾，然後在裡面新建 webpack.config.js 檔案: mkdir build && cd build && touch webpack.config.js
2. 根目錄下新建src資料夾，然後在src裡新建 index.tsx 檔案作為專案入口: mkdir src && cd src && touch index.tsx
3. 編寫簡單的webpack配置，只包含 entry 和 output :
4. 編寫 awesome-typescript-loader 配置項: 在webpack中的module是專門用來決定如何處理各種模組的配置項，例如本例中的typescript，這裡主要用的配置項就是 module.rules ，而當前只需要簡單配置解析 .tsx 檔案型別即可
5. 在 src/index.tsx 中寫入口檔案
  
  但是這時候你會發現有一個錯誤沒有處理
  
  這是因為在 tsconfig 裡面沒有指定 JSX 的版本，這時候在 tsconfig 的 compilerOptions 中新增 "jsx": "react" 配置項即可消除錯誤此外還需要注意一點，以後需要 import xxx from 'xxx' 這樣的檔案的話需要在webpack中的 resolve 項中配置 extensions ，這樣以後引入檔案就不需要帶副檔名
6. 新增頁面模板: 在 build 資料夾下新建資料夾 tpl ，然後在 tpl 中新建一個 index.html ，如下:
  
  這時候有了頁面模板還是不夠的，還需要將頁面模板和打包出來的js檔案關聯起來，因為考慮到以後打包出來的js的檔案不會是一個固定的名稱，所以這裡需要使用一個webpack的外掛 html-webpack-plugin
7. 配置 html-webpack-plugin : 首先我們安裝一下 npm install -D html-webpack-plugin ，然後在webpack的plugins配置項下進行一些簡單配置:
  
  配置完成後就可以啟動專案了
8 . 配置tsconfig
- 編譯目標這時候我們切回 tsconfig 配置中，會發現在 compilerOptions 配置項的 target 是 es5 ，也就是說把ts程式碼編譯成es5規範的程式碼，如果不做相容的話，我們可以將它設定為es6，使其編譯成es6的程式碼
- 模組處理在 module 項中，會發現生成的是 commonjs 的模組系統，因為不考慮相容，所以這裡我也將其設定為最新的 esnext ，並且將模組處理方式改為用node來處理，設定 moduleResolution 項為 node ，不做模組處理方式設定的話可能會有報錯
9 . 專案啟動這時候我們可以在 package.json 中新增啟動命令 "dev": "webpack-dev-server --config build/webpack.config.js --mode development" , 其中 --mode development 用於指定開發模式，否則在webpack4+版本下會有警告然後直接 npm run dev 即可