相關(guān)文章和閱讀順序

搭建Typescript+React項(xiàng)目模板(1) --- 項(xiàng)目初始化
搭建 Typescript+React 項(xiàng)目模板 (2) --- 提升開(kāi)發(fā)體驗(yàn)
搭建 Typescript+React 項(xiàng)目模板 (3) --- 整理項(xiàng)目和雜項(xiàng)
搭建 Typescript+React 項(xiàng)目模板 (4) --- 項(xiàng)目打包
搭建 Typescript+React 項(xiàng)目模板 (5) --- 團(tuán)隊(duì)規(guī)范

文章已同步更新到掘金專欄(https://juejin.im/user/5a77c815f265da4e9518bebc/posts)

項(xiàng)目地址

目前集成

• react - 16.4.x
• react-router-dom - 4+
• mobx - 5+
  • 狀態(tài)管理庫(kù)
• 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 功能，并動(dòng)態(tài)生成.scss的.d.ts文件
• husky
  • pre-commit

需求分析

因?yàn)槟０迨菫橐院箜?xiàng)目開(kāi)發(fā)所準(zhǔn)備的前奏工作，所以在搭建之前我覺(jué)得首先需要先考慮以下幾個(gè)方面:

• 開(kāi)發(fā)體驗(yàn)
• 項(xiàng)目打包
• 團(tuán)隊(duì)規(guī)范
  那么這一篇就先做個(gè)起手式，先搭建一個(gè)簡(jiǎn)單的可以跑起來(lái)的架子

起手安裝

• 前置安裝
  首先需要全局安裝typescript，這里默認(rèn)大家都已經(jīng)安裝了node以及npm
  npm install -g typescript

• 首先新建文件夾并進(jìn)入
  mkdir ts-react && cd ts-react

• 然后進(jìn)行初始化，生成package.json和tsconfig.json
npm init -y && tsc --init

• 安裝開(kāi)發(fā)工具
  這里包含有webpack4, webpack-cli, webpack-dev-server
npm install-D webpack webpack-cli webpack-dev-server

• 安裝react相關(guān)
  因?yàn)樾枰蟭s，而react原本的包是不包含驗(yàn)證包的，所以這里也需要安裝相關(guān)ts驗(yàn)證寶
  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

這個(gè)時(shí)候基本的安裝步驟就完成了，以后需要什么再陸續(xù)添加進(jìn)去，現(xiàn)在開(kāi)始創(chuàng)建項(xiàng)目

項(xiàng)目啟動(dòng)

• webpack配置
  1. 在項(xiàng)目根目錄新建一個(gè)build文件夾，然后在里面新建webpack.config.js文件:
     mkdir build && cd build && touch webpack.config.js
  2. 根目錄下新建src文件夾，然后在src里新建index.tsx文件作為項(xiàng)目入口:
     mkdir src && cd src && touch index.tsx
  3. 編寫簡(jiǎn)單的webpack配置，只包含entry和output:
     
     image.png
  4. 編寫awesome-typescript-loader配置項(xiàng):
     在webpack中的module是專門用來(lái)決定如何處理各種模塊的配置項(xiàng)，例如本例中的typescript，這里主要用的配置項(xiàng)就是module.rules，而當(dāng)前只需要簡(jiǎn)單配置解析.tsx文件類型即可
     
     image.png
  5. 在src/index.tsx中寫入口文件
     
     image.png
     
     但是這時(shí)候你會(huì)發(fā)現(xiàn)有一個(gè)錯(cuò)誤沒(méi)有處理
     
     image.png
     
     這是因?yàn)樵?code>tsconfig里面沒(méi)有指定JSX的版本，這時(shí)候在tsconfig的compilerOptions中添加"jsx": "react"配置項(xiàng)即可消除錯(cuò)誤
     此外還需要注意一點(diǎn)，以后需要import xxx from 'xxx'這樣的文件的話需要在webpack中的resolve項(xiàng)中配置extensions，這樣以后引入文件就不需要帶擴(kuò)展名
     
     image.png

6. 添加頁(yè)面模板:
   在build文件夾下新建文件夾tpl，然后在tpl中新建一個(gè)index.html，如下:
   

   image.png
   
   這時(shí)候有了頁(yè)面模板還是不夠的，還需要將頁(yè)面模板和打包出來(lái)的js文件關(guān)聯(lián)起來(lái)，因?yàn)榭紤]到以后打包出來(lái)的js的文件不會(huì)是一個(gè)固定的名稱，所以這里需要使用一個(gè)webpack的插件html-webpack-plugin

7. 配置html-webpack-plugin:
   首先我們安裝一下npm install -D html-webpack-plugin，然后在webpack的plugins配置項(xiàng)下進(jìn)行一些簡(jiǎn)單配置:
   

   image.png
   
   配置完成后就可以啟動(dòng)項(xiàng)目了

8 . 配置tsconfig
- 編譯目標(biāo)
這時(shí)候我們切回tsconfig配置中，會(huì)發(fā)現(xiàn)在compilerOptions配置項(xiàng)的target是es5，也就是說(shuō)把ts代碼編譯成es5規(guī)范的代碼，如果不做兼容的話，我們可以將它設(shè)置為es6，使其編譯成es6的代碼
- 模塊處理
在module項(xiàng)中，會(huì)發(fā)現(xiàn)生成的是commonjs的模塊系統(tǒng)，因?yàn)椴豢紤]兼容，所以這里我也將其設(shè)定為最新的esnext，并且將模塊處理方式改為用node來(lái)處理，設(shè)置moduleResolution項(xiàng)為node，不做模塊處理方式設(shè)置的話可能會(huì)有報(bào)錯(cuò)

image.png

9 . 項(xiàng)目啟動(dòng)
這時(shí)候我們可以在package.json中添加啟動(dòng)命令
"dev": "webpack-dev-server --config build/webpack.config.js --mode development",
其中--mode development用于指定開(kāi)發(fā)模式，否則在webpack4+版本下會(huì)有警告
然后直接npm run dev即可

image.png

總結(jié)

其實(shí)這個(gè)時(shí)候項(xiàng)目其實(shí)就已經(jīng)跑起來(lái)了，完全可以不用往下看，但是實(shí)際上的工作并沒(méi)有做完，下一章就開(kāi)始講解如何提高開(kāi)發(fā)體驗(yàn)