前端工程化小結

廈冰發表於2017-11-17
前端

專案初始化

腳手架

  • vue-cli

  • create-react-app

  • create-react-native

  • 各種boilerplate（github 搜尋 關鍵字+boilerplate）

框架和庫

UI框架

  • vue

    • element ui

    • iview

  • react

    • antd

前後端互動

  • fetch

  • axios

編碼規範

  • eslint

  • stylelint

打包構建

webpack

一切皆模組，都可以通過js的方式引入

webpack核心

配置

  • entry

    • 打包入口，可以是單個檔案，也可以是一個物件，或者陣列，webpack會載入entry指定的檔案，然後遞迴遍歷每個檔案的依賴，最後打包到一起，輸出到output指定的路徑

  • output

    • 指定webpack打包之後輸出的路徑

  • resolve

    • 配置webpack如何查詢檔案

    • 如果路徑指向一個檔案

      • 如果路徑具有副檔名，則被直接將檔案打包。

      • 否則，將使用 [resolve.extensions]選項作為副檔名來解析，此選項告訴解析器在解析中能夠接受哪些副檔名（例如 .js, .jsx）

    • 如果路徑指向一個資料夾，則採取以下步驟找到具有正確副檔名的正確檔案

      • 如果資料夾中包含 package.json 檔案，則按照順序查詢 resolve.mainFields 配置選項中指定的欄位。並且 package.json 中的第一個這樣的欄位確定檔案路徑。

      • 如果 package.json 檔案不存在或者 package.json 檔案中的 main 欄位沒有返回一個有效路徑，則按照順序查詢 resolve.mainFiles 配置選項中指定的檔名，看是否能在 import/require 目錄下匹配到一個存在的檔名。

      • 副檔名通過 resolve.extensions 選項採用類似的方法進行解析。

  • module

    • module裡配置了針對每一種模組如何載入

    • webpack支援的模組

      • ES2015 import 語句

      • CommonJS require() 語句

      • AMD define 和 require 語句

      • css/sass/less 檔案中的 @import 語句。

      • 樣式(url(...))或 HTML 檔案(<img src=...>)中的圖片連結(image url)

  • plugin

外掛用於擴充套件webpack，在外掛和loader能訪問到的webpack上下文是不一樣的，plugin可以處理loader處理不了的事情

- 常用外掛
    - HtmlWebpackPlugin
    - DefinePlugin
    - HotModuleReplacementPlugin
-  開發
    - https://doc.webpack-china.org/contribute/writing-a-plugin/\#-

  • loader

loader 用於載入待打包的資源，在import的時候觸發。

-  常用loader
    - postcss-loader
    - css-loader
    - file-loader
-  開發
    - https://doc.webpack-china.org/contribute/writing-a-loader

babel

  • babel-core

  • bable-register

  • babel-helper

  • babel-loader

polyfill

開發除錯

方案一：直接使用webpack-dev-server

  • webpack-dev-server=dev-server+webpack-dev-middleware+webpack-hot-middleware

方案二：開發伺服器+webpack-dev-middleware+webpack-hot-middleware

開發伺服器

  • 開發伺服器一般基於express或者koa

  • webpack-dev-middleware

    • express中介軟體，接受客戶端的get請求，然後把webpack打包到記憶體裡的檔案返回給客戶端

    • 原始碼分析

      • middleware.js---入口檔案

        • 判斷請求是否是get請求，不是則轉到下一個中介軟體

        • 否則讀取檔案，傳送給客戶端

      • lib

        • GetFilenameFromUrl.js

          • 通過url取到記憶體裡的檔名

          • PathJoin.js

            • 處理路徑

        • Shared.js

          • 處理和webpack的互動

  • webpack-hot-middleware

    • 啟動server-send-event伺服器，監聽服務

    • 監聽到打包事件之後，傳送訊息給客戶端

    • 客戶端接受到訊息後重新整理頁面

    • hot-middleware是重新整理整個頁面，如何實現增量更新

      • react-hot-loader

      • vue-loader

    • 原始碼解析

      • middleware.js---入口檔案

      • client.js

      • client-overlay.js

      • helpers.js

      • process-update.js

測試

單元測試

  • vue

  • react

    • jest+Enzyme

e2e測試

  • nightwatch+selenium

  • puppeter

打包優化

  • UglifyJsPlugin

  • OptimizeCSSPlugin

  • CommonsChunkPlugin

  • CompressionWebpackPlugin

  • 按需載入

部署

  • jenkins

  • nginx

相關文章