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

相關文章和閱讀順序

1.專案初始化

2.提升開發體驗

3.整理專案和雜項

4.專案打包

5.團隊規範

專案地址

目前整合

• 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以及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即可

  

總結

其實這個時候專案其實就已經跑起來了，完全可以不用往下看，但是實際上的工作並沒有做完，下一章就開始講解如何提高開發體驗