前端工程化小結

項目初始化

腳手架

• 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