搭建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便可

  

總結

其實這個時候項目其實就已經跑起來了，徹底能夠不用往下看，可是實際上的工做並無作完，下一章就開始講解如何提升開發體驗