我的博客地址

正式地址
測試地址
前端源碼
后端源碼

文章目錄

1. 項(xiàng)目及其技術(shù)棧介紹
2. 前端: 項(xiàng)目初始化
3. 前端: 使用Sass和Antd
4. 前端: 開發(fā)體驗(yàn)優(yōu)化
5. 前端: 搭建路由和狀態(tài)管理
6. 前端: 支持Axios
7. 前端: 打包與環(huán)境變量設(shè)置
8. 前端: 團(tuán)隊(duì)代碼規(guī)范
9. 后端: 項(xiàng)目初始化和使用Koa相關(guān)
10. 后端: 使用TypeORM和MySQL
11. 部署: 使用nginx部署前端項(xiàng)目
12. 部署: 后端部署
13. 部署: 使用jenkins自動化部署

前言

該篇博客介紹前端項(xiàng)目的初始化，將會使用到TypeScript，WebPack，React和React Router，目的是使得項(xiàng)目能夠跑起來。

安裝依賴

• TypeScript
  npm i -D typescript

• WebPack
  注意WebPack4.0之后需要安裝webpack-cli
npm install-D webpack webpack-cli webpack-dev-server

• React
  使用ts進(jìn)行編寫的話需要安裝相應(yīng)的types包
  npm install -S react react-dom react-router-dom
npm i -D @types/react-router-dom @types/react-dom @types/react

• Babel
  ts的編譯沒有使用ts-loader和awesome-typescript-loader，原因是用這兩個的話在后續(xù)的轉(zhuǎn)換js一些語法的時候還是需要安裝一些Babel插件，并且Babel比這兩個的編譯速度還快，所以這里直接使用Babel。
  npm i -D @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-syntax-dynamic-import @babel/preset-react @babel/preset-typescript babel-loader babel-plugin-import

  • babel/core: babel核心
  • babel/plugin-proposal-class-properties
    支持在class中使用如下代碼定義類屬性
    
    image.png
  • babel/plugin-proposal-decorators: 支持使用裝飾器
  • babel/plugin-syntax-dynamic-import: 異步加載import(xxx)
  • babel/preset-react babel/preset-typescript: 編譯react和ts代碼變?yōu)閖s代碼
  • babel-plugin-import: 后續(xù)antd的按需加載需要使用

• html-webpack-plugin
  處理html模板，把編譯后的相關(guān)script插入到html模板中
  npm i -D html-webpack-plugin

搭建

• 首先我們編寫webpack的配置文件，在項(xiàng)目根目錄新建build文件夾作為webpack配置存放位置，然后在下面新建webpack.config.js
  

  image.png

• 在webpack.config.js中編寫項(xiàng)目入口和編譯后的出口
  

  image.png
  
  注意這個地方上面的@type {import('webpack').Configuration}，這個配置可以使得你在編寫webpack的時候有配置項(xiàng)提醒:
  
  image.png

• 為了方便路徑處理，我們在build文件夾下新建一個utils.js文件，內(nèi)容如下:
  

  image.png
  
  然后在webpack.config.js中因?yàn)?code>resolve方法，并修改對應(yīng)的路徑:
  
  image.png

• 然后在build中再新建tpl文件夾，里面存放html模板index.html
  

  image.png

• 在build中新建文件夾rules，用來存放各種rule，我們先新建一個jsRules.js文件，并在其中到處一個數(shù)組:
  

  image.png
  
  然后在webpack.config.js中導(dǎo)入這個文件中的數(shù)組，并在module配置中進(jìn)行引用:
  
  image.png

• 做完后，從上面webpack的配置可以看出，入口將會在src文件夾中，所以我們在根目錄中新建src文件夾，然后在里面新建index.tsx，并編寫入口文件:
  

  image.png

• 這時候我們開始使用到ts進(jìn)行代碼的編寫，所以需要使用tsc --init初始化一個tsconfig.json文件出來:
  

  image.png

• 我們會發(fā)現(xiàn)之前的index.tsx中報了一個錯誤，原因是未在tsconfig中開啟jsx配置:
  

  image.png
  
  只需要在tsconfig中將jsx選項(xiàng)設(shè)置為react即可解決:
  
  image.png

• 現(xiàn)在回到build/rules/jsRules.js文件中，編寫babel對.tsx文件編譯的配置
  

  image.png

• 在build下新建plugins.js文件用以存放webpack的插件，引入html-webpack-plugin并編寫相關(guān)配置
  

  image.png
  
  在webpack.config.json中導(dǎo)入并使用:
  
  image.png

• 最后在package.json中添加項(xiàng)目啟動命令
  "dev": "webpack-dev-server --config build/webpack.config.js --mode development"
  
  image.png
  
  運(yùn)行npm run dev，項(xiàng)目就成功跑起來了:
  
  image.png