精益 React 學習指南（Lean React）- 2.1 前端工程化概述

時間 2019-11-06

標籤 react 學習指南 lean 2.1 前端工程概述欄目 React 简体版

原文原文鏈接

書籍完整目錄javascript

2.1 前端工程化概述

在前端開發的初始階段，開發者一般只用關 html, css, javascript。可是現代化的前端開發已經不只僅是業務代碼自己，真正的前端開發環境涉及不少方面的需求，如：css

開發需求html
共享需求前端
性能需求java
部署需求jquery

這些東西咱們都統一的叫作前端工程化，爲了簡化前端工程化的配置，出現了不少優秀的工具好比：git

前端工做流工具：Gulp，Grunt，Broccoligithub
前端 Javascript 模塊編譯工具：Babel，Browserify，Webpackweb
前端開發系列工具： livereload，數據 mock，代碼監控，代碼檢查npm

在本節中咱們對涉及到這些概念進行簡單的概述介紹。

2.1.1 前端開發需求

在開始一個前端項目的時候，一般咱們會進行技術選型，而後定義代碼規範，已經配合後端和業務進行項目的目錄規劃，我把這些相關的需求都歸爲前端開發需求。

代碼規範

開發一般來講是一個團隊的事，在大型的前端開發團隊中，一般會定義團隊的代碼開發規範，也能夠遵循一些開源的規範：airbnb style guide。代碼規範能夠提升代碼的可閱讀性和避免一些低級錯誤。爲了將代碼規範的檢查放到前端開發工程中，能夠利用 jslint 在提交代碼以前對代碼進行自動的 code lint。

Javascript 預處理

Javascript-* 語言

前端開發的核心是 Javascript，可是由於 Javascript 語言在設計上的種種不足，爲了優化語言自己的問題，出現了不少試圖替代 Javascript 的語言，這其中如：

Coffeescript
Livescript
Typescript
React Jsx
Dart
Elm

這些語言在語法上都具備相應的優點，如 Typescript 中提供靜態語法的一些強類型特性，Coffeescript, Livescript 提供現代化語言的語法糖特性，專門針對 xml 優化的 JSX 。這些語言最終都會編譯爲 Javascript。

ES6

由於瀏覽器的實現大多仍是 ES5 的標準，爲了使用最新的 ES6 語法，一般的作法是採用 Babel 將 ES6 編譯爲 ES5。

CommonJS

前端開發一直在追求模塊化，這個過程當中出現了 AMD, CommonJs, Umd 這些模塊定義模式，簡單而言：

AMD（Asynchronous Module Definition）: 異步模塊定義，能夠異步的加載或依賴其餘模塊，支持的庫如 Require.js, Sea.js 。
CommonJs : 能夠將 Javascript 按照 Node 模塊的方式定義
UMD: 爲了兼容 AMD 仍是 CommonJsx 風格，出現了 UMD

AMD 例子：

// myFubc.js
define(['jquery'], function ($) {
    function myFunc(){};
    return myFunc;
});

CommonJs 例子：

var $ = require('jquery');
function myFunc(){};
module.exports = myFunc;

UMD 例子：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    function myFunc(){};
    return myFunc;
}));

其中，CommonJs 的風格是須要編譯的，最終會將多個模塊編譯爲一個 UMD 方式定義的模塊。

一個前端項目可能同時用了 Es6 的語法和 CommonJs 的規範，以及 JSX 語言。因此前端開發須要 Javascript 的編譯過程，編譯的過程大可能是在開發的時候，這個過程就是 Javascript 預處理。