歷史

後端

前端

Refresh

這種模式已經不符合當前業務需求以及開發效率要求

面臨問題

技術爲了解決問題而存在

想要用 ES6 新特性來加速開發效率解決問題，但我又要考慮到相容性的問題，煩惱！

想要用 less/sass/postcss... 加強僞程式化和結構化，但 browser 環境不能識別，煩惱！

想要用模組化方式來提高可維護性，私有成員等，但在 browser 環境不能直接使用，煩惱！

想要部署上線前需要手動去壓縮資源檔案(文件)，部署過程中也需要手動上傳程式。
手動 === 手殘 (條件成立)，可 通過機器取代人重覆操作 (條件成立)

想要在多人協作開發過程中，無法統一 coding style 保證，從 pull 下來，發現一些硬性要求條件無法一致

語言與語法弊端

無法使用模塊化/組件化

重覆性操作流程

無法 coding style 統一和 quality (lint)

依賴後端接口支持

整體太依賴後端

什麼是工程化

主要提高效率，降低成本，quality 保證

開發(寫code)

preview/testing

commit/push

deployment

• 格式化
• 檢查 coding style，lint (quality 保證)
• 編譯/build/打包

• web server mock
• live reloading
• sourcemap

重覆性被自動化

• git hooks
• lint-staged
• CI

• CI/CD
• 自動部署

工程化≠工具

工程化≠工具

• 工具不是工程化核心
• 工程化核心對專案整體規劃或者架構，而工具過程中只是協助(輔助)我們實現規劃和架構手段

Local 環境

git

source code

test code

build

開發

debugger

PRD 環境

run code

invoke

deploy

後端