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

YDJFE發表於2018-09-27

相關文章和閱讀順序

1.專案初始化

2.提升開發體驗

3.整理專案和雜項

4.專案打包

5.團隊規範

專案地址

目前整合

需求分析

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

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

起手安裝

  • 前置安裝 首先需要全域性安裝typescript,這裡預設大家都已經安裝了node以及npm npm install -g typescript

  • 首先新建資料夾並進入 mkdir ts-react && cd ts-react

  • 然後進行初始化,生成package.jsontsconfig.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配置,只包含entryoutput:

      image.png

    4. 編寫awesome-typescript-loader配置項: 在webpack中的module是專門用來決定如何處理各種模組的配置項,例如本例中的typescript,這裡主要用的配置項就是module.rules,而當前只需要簡單配置解析.tsx檔案型別即可

      image.png

    5. src/index.tsx中寫入口檔案

      image.png
      但是這時候你會發現有一個錯誤沒有處理
      image.png
      這是因為在tsconfig裡面沒有指定JSX的版本,這時候在tsconfigcompilerOptions中新增"jsx": "react"配置項即可消除錯誤 此外還需要注意一點,以後需要import xxx from 'xxx'這樣的檔案的話需要在webpack中的resolve項中配置extensions,這樣以後引入檔案就不需要帶副檔名
      image.png

    6. 新增頁面模板: 在build資料夾下新建資料夾tpl,然後在tpl中新建一個index.html,如下:

      image.png
      這時候有了頁面模板還是不夠的,還需要將頁面模板和打包出來的js檔案關聯起來,因為考慮到以後打包出來的js的檔案不會是一個固定的名稱,所以這裡需要使用一個webpack的外掛html-webpack-plugin

    7. 配置html-webpack-plugin: 首先我們安裝一下npm install -D html-webpack-plugin,然後在webpack的plugins配置項下進行一些簡單配置:

      image.png
      配置完成後就可以啟動專案了

    8 . 配置tsconfig

    • 編譯目標 這時候我們切回tsconfig配置中,會發現在compilerOptions配置項的targetes5,也就是說把ts程式碼編譯成es5規範的程式碼,如果不做相容的話,我們可以將它設定為es6,使其編譯成es6的程式碼
    • 模組處理 在module項中,會發現生成的是commonjs的模組系統,因為不考慮相容,所以這裡我也將其設定為最新的esnext,並且將模組處理方式改為用node來處理,設定moduleResolution項為node,不做模組處理方式設定的話可能會有報錯
      image.png

    9 . 專案啟動 這時候我們可以在package.json中新增啟動命令 "dev": "webpack-dev-server --config build/webpack.config.js --mode development", 其中--mode development用於指定開發模式,否則在webpack4+版本下會有警告 然後直接npm run dev即可

    image.png

總結

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

相關文章