Modern
Web Development
2018/9/28
丘梓陽
自從nodejs出現後，改變整個Web端。讓JavaScript變得更強大，不是當初只能在browser跑的小人物，如今已經衝出世界
這幾年Web改革
- npm／yarn
- 模組系統 (commonJS, AMD, ES6, ....)
- 預處理器 (PostCSS)
- transpiler (babel／JS)
- 等等
引用別人圖
前端工程化所具備基礎知識
Modules
模組化(1)
模組化是指一個複雜功能拆解成多個小模組
例如我們過去使用jQuery，通過</body>前include jquery，當頁面loading(加載)後，自然就可以使用jquery功能。以下我列出幾個問題：
1. 但是項目/專案變大後，有很多功能互相依賴，導致代碼量膨大，請求http次數也會增加，導致效能不好
2. 我們無法很好管理專案中依賴(library以及自己寫功能)以及版本。
3. 無法很好控制依賴加載順序(jquery -> lib1 -> lib2)
4. 命名會導致衝突(兩個library很可能有同一個名稱)
以上是以維護性為主，以及團隊之間協調。
下一頁會介紹如何使用模組化去組織我們程式
Modules
例子
1. lib1依賴jquery，lib2依賴lib1以此類推。
2. 看到上面例子很可怕，要很小心加載順序
3. 也很難管理，命名空間也會受到污染。
Modules
模組化(2)
想使用模組化來組織你的專案？
- 如果要使用存純js技巧
- IIFE(立即呼叫函數)，Closure(閉包)，Google Search...
- 目前有模組加載器(module loader)來幫我們加載模組進來
- import (es6)
- require (amd, commonjs)
- 沒使用過(UMD, CMD)
Webpack
介紹
Webpack可以做什麼：
Webpack是一個打包模組的JavaScript工具，在webpack裡看作所有檔案都是模組，通過Loader轉換，通過Plugin加入鉤子，最後輸出的多個模組合成一個檔案
下一張有圖，有真相
主流前端框架(Vuejs, Reactjs, Angularjs), 官方使用webpack作為工程化工具
一切檔案：js， css/scss， 圖片... 在webpack眼裡都是一個個模組，這樣好處是能清晰描述出各個模組之間依賴關係，方便webpack对模组进行打包。
經過webpack處理，最終輸出browser能使用資源
自動化/構建工具
介紹
構建可以幫我們做東西有：
- 程式轉換：scss編譯成css，es6編譯成es5...
- 檔案優化：壓縮js/css/html
- 模組合併：在專案中有很多個模組和檔案，可以把模組分類在合併
- 自動刷新：監聽開發環境，哪個程式有修改，會自動刷新
- 程式檢測：可以檢測是否符合規範以及單元測試是否通過
- .....
構建工具都是基於nodejs開發，有webpack, rollup, gulp, grunt
webpack核心概念
-
入口(Entry
- 模組(Module)
- 區塊(Chunk)
- 轉換器(Loader)
- 擴展插件(Plugin)
- 輸出(Output)
讀取入口
分析模組引用
按照引用加載模組
檔案優化處理
模組檔案合併
模組檔案編譯處理
輸出
構建流程
Loader
-
可以理解成翻譯員，因為webpack只看懂JS
- 需要透過loader去加載和轉換
- 使用loader去配置／設定告訴webpack
module: {
rules: [
{
// 用正規(regex)去匹配要用哪個loader 转换的 CSS 文件
//告訴webpack遇到css副檔名(extension file),先使用css-loader讀取css檔案裡，然後交給style-loader，然後在把css內容加到js裡
test: /\.css$/,
// *loader執行順序是由後到前
// minimize只是參數是否開啟壓縮
use: ['style-loader', 'css-loader?minimize'],
}
]
}Text
Plugins
-
可以理解成擴展webpack功能，帶來靈活性
plugins: [
// ExtractTextPlugin是可以抽離部分代碼形成單獨檔案
new ExtractTextPlugin({
// 繼上次案例從js檔案中抽取所有css出来的形成獨立.css檔案的名称
filename: `[name].css`,
}),
]
DevServer
-
可以理解成讓我們開發變得很效率
- 例如在開發過程中，我們需要
- http微型服務器
- 監聽檔案裡程式變化，以及即時更新頁面
- sourceMap，用來debug
組件和模組差別
components vs modules
-
模組化是可互相依賴，但復用性難度大(程式底層邏輯)
- 組件耦合性很低，但復用性很高 (UI層)
Demo
一起加油
Modern Web Development
By Decade Hew
