現代化 Web 開發技術學習分享

非同步處理一直以來都是 JavaScript 開發者很常遇到的情境，在之前，我們很常使用 callback 去完成任務，當結構變得複雜時，容易形成所謂的 callback hell，造成程式碼難以維護；在 ES6 版本中，新增了 Promise 物件，它能夠將非同步流程包裝成簡潔的結構，並提供統一的錯誤處理機制，解決了傳統 callback hell 的問題。此篇將會解析 Promise 的處理流程與相關方法。

大多人開發項目都是使用 Axios 或者 jQuery 庫的 $.ajax 方法來完成 HTTP 請求行為，如果要使用 JS 原生的方法，只有 XMLHttpRequest 可以選擇，但程序繁瑣、順序混亂等問題，我相信大家因該都有遇到過，這次來記錄一下 ES6 新增的原生方法 Fetch API。

初期在寫 JavaScript 代碼時，都是以學習心態去完成目標，程式碼的品質較為不穩定，但到了業界，通常需要配合團隊開發專案規範，其中也包含了代碼規範，ESLint 就是 JavaScript 的代碼規範工具，他可以讓你維持一定的程式碼品質，敲代碼的同時也可以進行觀念的修正。

在 Gulp 可使用 gulp-imagemin 套件來壓縮 PNG、JPG 等類型圖片，想當然的在 Webpack 也有類似的套件可使用，名為 image-webpack-loader，一樣都是基於 imagemin 所設計，兩者在使用上幾乎沒有差別，一般人可能聽過的是 imagemin-webpack-plugin，這是屬於 Plugin 類型的套件，代表是在生成資源時才進行壓縮，無法像 image-webpack-loader 一樣後續再交由 url-loader 進行處理，我自己是比較喜歡 image-webpack-loader 就是了。此篇將介紹如何使用 image-webpack-loader 壓縮各種類型的圖片。

通常我們在將一個專案改為目前流行的 SPA (Single-page application) 時，最大的考慮因素肯定是 SEO 是否重要，畢竟在 SPA 的世界裡幾乎沒有 SEO 的可能，對於爬蟲來說是無法爬取 JavaScript 檔案內容的，這也就印證 SPA 不適合用在強調 SEO 的專案上面，有些人可能會選擇使用像是 Nuxt.js、Next.js 等 SSR 框架，這確實是個解決辦法，但對於小型項目來說更好的做法是使用 Prerendering 方式，過程也相對簡單。此篇將介紹如何使用 prerender-spa-plugin 將我們的 SPA 添加預渲染。

之前我們有提到如何使用 html-webpack-plugin 內建的 minify 選項壓縮 HTML，而 JavaScript 則是依靠 Webpack 本身內建的 TerserWebpackPlugin 進行壓縮，唯獨少了 CSS 的方法，這次就來介紹如何使用 optimize-css-assets-webpack-plugin 壓縮我們的 CSS，其內部預設是使用 cssnano 作為編譯器，cssnano 是建立在 PostCSS 生態系統上的工具，代表我們也可使用 postcss-loader 搭配 cssnano 來達到同樣的目的及效果，如果專案本身已導入 PostCSS，建議直接搭配 cssnano 可更快的完成壓縮目的。

在 Webpack 中我們會使用 DefinePlugin 或 EnvironmentPlugin 來設置全局變量，以提供 entry 內的模組針對這一個變數快速做響應，但有一點困擾我們的是，這兩個 Plugin 撰寫的全局變量都是屬於顯式性質的，代表任何人都能從所撰寫的位置得知這一個全局變量，如果情況發生在尚未發布的專案，有心人就可利用這一個變量，通常為測試主機位址，進一步做攻擊的動作，在後端我們會使用 dotenv 套件，前端可使用 dotenv-webpack 套件，屬 DefinePlugin 與 dotenv 的包裝，進一步將變量中的敏感信息隱藏起來。

Grid System 可說是近年來前端工程師必備的一項技能，傳統上我們都是針對特定對象撰寫 media query 以達到 RWD 的效果，但對於可維護性及結構性來說，似乎這不是個好的做法，現在我們都會直接導入像是 Bootstrap 或 Tailwind 等 CSS 框架，利用內建的 Grid System 更有效率的撰寫出網站基底的 RWD 樣式，但這樣的問題是，在不考慮使用 PurgeCSS 或針對原始碼做刪減的情況下，我們將整個框架導入進來就為了使用 Grid System 會不會有點小題大作？不如我們自己來開發 Grid System 吧！

所謂的 CSS 方法論是指無須任何套件或框架即可達成模組化目的的架構心法，用以讓 CSS 也能有良好的重用性、維護性及延展性，雖然我們前面已經可透過像是 SCSS 預處理器搭配 7-1 Pattern 達到模組化的效果，但 7-1 模式的模組化拆分最小單位為檔案，這代表著檔案內的所有樣式依然還是處於未模組化的狀態，此時我們就可利用知名的 OOCSS、SMACSS、BEM 等 CSS 方法論針對像是 class 這種較小的單位進行模組化，真正意義上的讓樣式表達到模組化目的。

前一篇說明了如何利用 @import 將 partial 檔案給載入進來，進而達到模組化的目的，但這邊有一個問題是，我們該針對那些內容來模組化呢？當初這點捆擾了我許久，直到發現原來有所謂的 Sass 7-1 Pattern 可參考，7-1 模式是構建 Sass 項目的一種流行且有效的模組化方法，由 7 個資料夾與 1 個檔案所組成，每一個資料夾都有各自實現的對象，我們可把同個實現對象但不同部分的 Sass 模組給放進去，這些模組最後都會被根目錄檔案視為 @import 對象，使之編譯成單獨的 CSS 檔案。