前端技術週刊 2018-09-03

前端快爆

• 經過兩年的開發，Babel 7.0 已於8月27日正式釋出。新版本不再支援 Node.js 5-，移除了對 preset-es* 和 preset-stage-* 的支援，並對部分外掛進行了更名。此次大版本更新更多是編譯速度和生態治理方面的優化。?

點評：更多更新細節，可見《一口（很長的）氣了解 babel》最後一節。

• 在將來版本的 Chrome 69 中，document.createTouchList() 介面被廢除，window.confirm() 不再喚起對應頁面所在的標籤。?

點評：部分前端的奇技淫巧包括利用各個 API 的副作用，隨著瀏覽器的發展，影響使用者體驗的副作用會被逐步限制和規範。

• Chrome 意欲實現「在移動端，當使用者開啟節約流量的選項，網路緩慢時取消對 JavaScript 資源的請求」的特性。此選項對應 Save-Data 的請求頭。?

點評：2001年打來大哥大，邀你回到沒有頁面互動的年代。所以漸進增強在現代前端開發還是有用的思想。

• Safari Technology Preview 64 釋出，此版本 Fetch API 不再支援 content-length 設定，傳送 Push Notification 前必須要求使用者先與頁面有互動，此外還有部分 API 完成更新。?

瑞士軍刀

• 藉助 Puppeteer，我們可以更好的實現對介面的測試，藉助 puppeteer-recorder，我們可以更快的錄入自動化測試指令碼。

• 有海外業務？Vue goodshare 直接用 Vue 元件封裝好了社交分享按鈕。

• 在每次 Webpack 打包之間，想知道包體大小有何變化嗎？size-plugin 即是專門用來做這個的 Webpack 外掛。

專題：解析器

本週專題是由行列給我們帶來的解析器相關的內容。前端的流程自動化、原始碼管理、程式碼功能增強與效能優化都繞不開解析器，本期專題即是相關解決方案的一個集合。

HTML 解析器：

• Erik Arvidsson 的 HTML Parser：很簡潔的基礎實現
• NPM 上的 HTML5 Parser：基於上述程式碼實現的 HTML5 解析器，諸如哪些標籤可以不需要關閉、哪些不能隨意巢狀等

CSS 解析器：

• PostCSS：PostCSS 功能很強大，外掛很多，要支撐這麼好的生態，基礎的 CSS 解析一定是穩定的。如果你需要自己解析樣式，require('postcss').parse('.selecor{rules}'); 就可以得到 AST 了
• CSS Parser：如果覺得用 PostCSS 只是解析 CSS 有點大材小用了，那就試試這個吧
• CSS What：該工具程式碼量非常少，適合入門學習。magix-combine 中的樣式選擇器解析，就是基於此庫

JavaScript 解析器：

• Acorn：如果願意讀原始碼的話，對理解 JavaScript 語言標準會有非常大的幫助
• 解析器 Esprima：配合 ESTools 也是一個不錯的選擇

細節：

• 如何實現一個 JSON.parse 方法：最適合初學者的解析器的實現，程式碼實現簡潔易懂

---

編輯：承虎(humphry) & 審閱：壹絲
題圖：https://www.udemy.com/parse-server/