前端項目技術選型

時間 2019-12-01

標籤前端項目技術選型简体版

原文原文鏈接

一個react的項目，光react確定是不足以作出一個優秀的項目的。那麼一個將軍要配哪些兵的。html

1. 懶加載

react原生lazy react16.6以上才支持，簡單好用
bundle-loader，安裝bundle-loader來使用，簡單輕便，就是每一個文件都的加上lazy，社區熱度不夠，目前已不多更新維護。
react-loadable，簡單輕便，api豐富（具體安裝使用文檔，可見個人github）

爲何要作dynamic import？

dynamic import不知道爲何有不少叫法，什麼按需加載，懶加載，Code Splitting，代碼分頁等。總之，就是在SPA，把JS代碼分紅N個頁面份數的文件，不在用戶剛進來就所有引入，而是等用戶跳轉路由的時候，再加載對應的JS文件。這樣作的好處就是加速首屏顯示速度，同時也減小了資源的浪費。前端

2. 支持TS

不像java是強類型語言，js是一門弱類型語言，對變量的類型很是寬容，並且不會在這些變量和它們的調用者之間創建結構化的契約。若是你長期在沒有類型約束的環境下開發，就會形成「類型思惟」的缺失，養成不良的編程習慣，這也是作前端開發的短板之一，值得咱們警醒。java

儘管 ES 標準在近幾年有了長足的進步，但在類型檢查方面依然無所建樹。你們可能經常會遇到這樣到場景：react

你調用一個別人寫的函數，很不幸，這個傢伙沒有留下任何註釋，爲了搞清楚參數類型，你只能硬着頭皮去看裏面的邏輯。
爲了保證代碼的健壯性，你頗有責任心，對一個函數的輸入參數進行各類假設，最終給老闆盛上了一碗香噴噴的意大利麪。
領導看好你，讓你維護一個重要的底層類庫，你殫精竭慮，優化了一個參數類型，但不知道有多少處引用，在提交代碼前，是否感到脊背發涼？
明明定義好了接口，可一聯調就報錯了——「TypeError: Cannot read property ‘length’ of undefined」，因而你怒氣衝衝地去找後端理論：「嘿，哥們兒！這個字段是數組！這個字段是數組！這個字段是數組！」

讓咱們see see下面的Dome：git

1 == '1'     //數字和字符串 true

'1' == true  //字符串和布爾 true

null == undefined  // null和 undefined true

let a=1 //a定義爲數字

a={b:1}  // a也能夠改成object {b: 1}

// 再好比
let arr = [{a:1}];
function mapArr(arrVal){
    return arrVal.map(ele=>ele.a)
}
mapArr(arr); //[1]
//在某個不知道的狀況下 arr給賦值成 undefined,而仍是執行mapArr(arr)
//Uncaught TypeError: Cannot read property 'map' of undefined
複製代碼

這個時候就須要TS，很好地彌補了 JavaScript 在靜態類型檢查方面的缺陷github

官網定義：TypeScript是JavaScript 的一個超集，它能夠編譯成JavaScript，能夠在任何瀏覽器，任何計算機，任何操做系統上運行，而且是開源的。typescript

那麼， TypeScript 究竟有哪些特性使得它成爲你們的」剛需「？編程

第一，類型檢查。TypeScript 會在編譯代碼時進行嚴格的靜態類型檢查，這意味着你能夠在編碼階段發現可能存在的隱患，而沒必要把它們帶到線上。後端

第二，語言擴展。TypeScript 會包括來自 ES 6 和將來提案中的特性，好比異步操做和裝飾器；也會從其餘語言借鑑某些特性，好比接口和抽象類。api

第三，工具屬性。TypeScript 可以編譯成標準的 JavaScript，能夠在任何瀏覽器、操做系統上運行，無需任何運行時的額外開銷。從這個角度上講，TypeScript 更像是一個工具，而不是一門獨立的語言。

除此以外，TypeScript 還能夠幫助團隊重塑「類型思惟」，接口提供方將被迫去思考 API 的邊界，他們將從代碼的編寫者蛻變爲代碼的設計者。

Dome 子組件接口裏定義了props裏的name必須的且是string，而父組件沒有傳遞，或者傳錯類型，typescript類型校驗都會及時在開發階段提示出來。

3.配置husky：stylelint、tslint，加入到pre-commit校驗中

www.yuque.com/dingyin-pah…

4.配置一下commitizen,規範commit格式，使得能夠自動生成change.log

www.yuque.com/dingyin-pah…

5.單元測試JEST

下面是測試數字轉英文的funciton ；0，1，2，3 依次轉成 A，B，C，D

// 測試utils裏面的方法
import { numberToLetter } from '../packages/utils/index';

let assert = chai.assert;

describe('#numberToLetter()', function() {
  it('should return -1 when the value is not present', function() {
    assert.equal(numberToLetter(1), 'B');
  });
});
複製代碼