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

YDJFE發表於2018-09-27

TypeScriptReact

專案地址

目前整合

react – 16.4.x
react-router-dom – 4+
mobx – 5+
- 狀態管理庫
typescript – 3.0.x
webpack – 4.16.x
ant design
axios
react-loadable
- 非同步元件載入
@svgr/webpack
- 使 svg 可以以元件的方式引入
typings-for-css-modules-loader
- 用於替代css-loader的 css module 功能，並動態生成.scss的.d.ts檔案
husky
- pre-commit

需求分析

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

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

起手安裝

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