如何快速上手React、Vue前端專案

FPioneer發表於2019-02-25
ReactVue前端

前言

老大要求瞭解接觸“簡單”（呵呵）的前端開源專案配合進行新專案開發，難免有過“慌的一匹”的感覺，正所謂“欲練神功，必先......,額，有本武林祕籍瞅瞅嘛”。沒錯,這篇私人祕籍就是為那些準備上手常見的前端專案提供招式參考。

問題

  1. 新專案到手，如何抓住重點，快速上手？
  2. 如何快速瞭解專案中的技術棧？
  3. 如何深入瞭解專案中的腳手架實現？

核心

  • 明確掌握專案中所用到的技術棧
  • 瞭解使用對應的npm依賴包

開始瞭解專案

這裡全程以ant-design-pro專案為例子

1. 檢視專案中的README.md文件

README.md文件就是該專案的說明文件，一般放置在專案的根目錄下。在該文件中往往蘊含著專案構建者對該專案的描述（Introduction，Features，Usage， License...），通過該文件可以快速瞭解專案的技術棧，如何構建等重要資訊。

2. 檢視專案的package.json，確定專案的技術棧

package.json檔案，定義了這個專案所需要的各種npm依賴，以及專案的配置資訊。執行npm install 命令會根據這個檔案下載對應的npm依賴包。 常見的package.json欄位（可對照後面的package.json程式碼檢視）

  1. name欄位 專案名稱
  2. version欄位 專案版本號
  3. description欄位 專案描述
  4. author欄位 專案作者
  5. scripts欄位 指定執行指令碼命令的npm。 例如npm run start會執行scripts下的start欄位裡面的命令。
  6. dependencies欄位 指定了專案執行所依賴的模組以及對應的版本號
  7. devDependencies欄位 指定專案開發所需要的模組以及對應的版本號
  8. engines欄位 規定該模組執行的平臺
  9. browserslist欄位 規定專案相容的瀏覽器平臺

注意：還會有更多其他的欄位，如果需要了解，則直接在google搜尋對應額欄位則知道該欄位的作用。

重點解析：

  • scripts欄位： 該欄位主要作用是指定執行的指令碼命令。
    常用的指令碼命令型別有：
  1. 專案在本地執行命令；
  2. 專案構建編譯生產需要的檔案命令；
  3. 測試指令碼執行命令；
  4. 程式碼規範校驗命令。
  • dependencies欄位、devDependencies欄位：該欄位能夠確定專案中所用的技術棧，以確定自己是否熟悉該技術棧（專案中所有所用的npm包都應該知道其作用）。
    常見的技術棧主要有以下幾部分組成：
    （框架）+ （JS編寫語言）+（樣式表前處理器語言）+（UI框架）+（專案構建工具）+ （資料流工具）

常見的技術棧（根據dependencies欄位，devDependencies欄位確定專案的技術棧）

  • 框架： React、Vue、Angular
  • JS編寫語言：TypeScript、ES6、CoffeeScript
  • 樣式表前處理器語言：Stylue、LESS、SASS
  • UI框架：Antd、Element、Bootstrap...(比較多)
  • 專案構建工具：Webpack、Grunt、Gulp eg:
{
  "name": "ant-design-pro",
  "version": "2.2.1",
  "description": "An out-of-box UI solution for enterprise applications",
  "private": true,
  "scripts": {
    "start": "cross-env APP_TYPE=site umi dev",
    "build": "umi build",
    "lint-staged": "lint-staged",
    "test": "umi test",
    "prettier": "node ./scripts/prettier.js"
  },
  "dependencies": {
    "@antv/data-set": "^0.10.1"
  },
  "devDependencies": {
    "@types/react": "^16.8.1"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ]
}
複製程式碼

3. 搞清楚專案的目錄結構

如果使用的腳手架為開源腳手架的話，在github上會找到對應的說明。要判斷該腳手架是否為開源腳手架，請按照第一二步驟來確定。

常見的目錄結構

  • config 專案的配置檔案，常見的配置檔案有：構建工具配置檔案、環境變數配置檔案、路由配置檔案、還有其他的npm包的配置檔案
  • mock mockJs的檔案放置目錄。模擬使用者介面請求的返回資料
  • tests 自動化測試指令碼檔案放置目錄
  • src 程式碼的原始檔目錄
  • src > components Vue、React元件封裝目錄
  • src > utils 公共檔案放置目錄
  • src > services ajax介面收口
  • src > assets 靜態資原始檔目錄

4. 找準專案的入口檔案

專案的入口檔案的檔名一般為：main.js、app.js、index.js等。入口檔案都放置於src資料夾目錄下（具體應該檢視對應的專案構建工具配置）。這個檔案一般會引用全域性用到的npm依賴包，路由檔案，重置樣式檔案，全域性樣式檔案......

注意：有些專案裡面找不到這些入口檔案怎麼辦？那就要看看專案中使用的腳手架了，有些腳手架（例如：Nuxt.js）會直接幫你自動生成該檔案（這裡就不討論優劣了）。

5. 找到專案的路由檔案

路由檔案可以準確的找到哪個頁面對應著哪個元件，這個檔案在我們以後寫業務的時候經常會修改到。我們可以根據URL上的路由來根據路由檔案查詢對應的元件檔案。路由檔案可以多種多樣，總體來說應該是一個路由對應著一個元件，根據路由可以找到對應的元件檔案進行程式碼修改。同樣，自己需要新增頁面時，也需要首先在這個頁面進行路由宣告，才能訪問對應的路由顯示出對應的頁面元件。

注意：有些專案裡面找不到這些路由檔案怎麼辦？那就要看看專案中使用的腳手架了，有些腳手架（例如：Nuxt.js）會直接幫你自動生成該檔案。

eg:

export default [
  // user
  {
    path: '/user',
    component: '../layouts/UserLayout',
    routes: [
      { path: '/user', redirect: '/user/login' },
      { path: '/user/login', component: './User/Login' },
      { path: '/user/register', component: './User/Register' },
      { path: '/user/register-result', component: './User/RegisterResult' },
    ],
  }
]
複製程式碼

6. 模仿元件做一個TODO list

入門一個語言最經典的是Hello World.而上手一個專案的最好的應該是做一個todo list了吧。如果可以寫出對應的todo list的增刪改查，基本上能夠在該專案進行基本的業務編寫。

基本步驟：

  1. 在頁面資料夾中新建對應的元件；
  2. 在路由檔案中新增對應的路由（有些腳手架會自動幫你生成，不用自己手動新增）；

總結

總結

進階

作為一條鹹魚，僅僅是會用該專案中的腳手架來寫專案是遠遠不夠的。應該要了解腳手架的使用，並且要跟著設計者的思路，自己能夠打造一個類似的腳手架。接下來會介紹如何打造一個屬於自己的腳手架的基本思路。

鳴謝

最後特別鳴謝barretem對於本博文的討論分析。

相關文章