共 1867 字，讀完需 4 分鐘，速讀需 1 分鐘。本週收錄的內容包含主流前端框架 React、Vue.js、Angular 的版本更新和周邊擴充套件；CSS 方面，Grid 佈局是值得關注的；開發效率方面，有 2 篇關於 Git、Webpack 的技巧。內容如下，請享用。
技術動態
Angular 4.0.0 正式版釋出
Angular 近期釋出了 4.0 正式版，筆者只能感嘆前端社群的版本號真是越來越逆天了，4.0 版本與 2.x 版本幾乎是完全相容的，內含的改進包括：更小的檔案體積、檢視引擎的大幅度改進，能節省模板編譯產生的程式碼 60% 左右，此外還提供了支援服務端渲染的專案參考、最新版本的 TypeScript 支援等。看起來 Google 在 Angular 上投入了很大的精力，你跟麼？
微信小程式 6 大新能力全面解讀
微信小程式在 3 月 27 日晚 10 點突然爆出大新聞。微信為小程式開放了 6 大新能力，在知曉程式的這篇文章中，你將看到小程式 6 大新能力的最靠譜解讀。
輕鬆一刻：left-pad 事件週年紀
去年這個時候，JS 社群發生了讓很多開源包和開發者奔潰的 “left pad” 事件，隨後就有人唱衰 JS 社群，但是整個社群又做了很多事情來避免類似問題，這裡是一些比較有趣的推特內容，無聊的時候可以看看。
文章教程
通過例項搞懂 Grid 和 Flexbox 兩種佈局方式
做前端的同學不光要著眼於 JS 的變化，CSS 領域也在不斷演化，從早期的 table 佈局，到後來的 div + css 佈局，再到 flexbox 佈局，現在出現了更好用的 grid 佈局，對於新出的這兩種，flexbox 和 grid 有何異同？對比起來可能學習更快。
透視 webpack 構建，把 CommonsChunkPlugin 用到極致
webpack 官方開發組在 twitter 上發起了一個活動，讓大家使用 webpack-bundle-analyzer 把打包後的 webpack 依賴視覺化截圖發出來，然後給診斷 webpack 配置不合理的地方，這篇文章把大家典型的錯誤姿勢做了糾正，你需要自己研究下，很大概率，你用的姿勢也不對。
宣告 Vue.js 元件模板的 7 種姿勢
這篇文章梳理了宣告 Vue.js 元件模板的 7 種方式，並舉了比較具體的例子來說明，當然這其中方式在程式碼可讀性、可維護性、模組化等方面都有不小的差別，你所要做的就是漲點只是，選取自己最舒適的。
開發工具
最常用的 Git 奇技淫巧
這裡列出了超過 50 個 Git 相關的技巧，給出了每個技巧需要的命令和能解決的問題，想真正掌握 Git 操作？除了看 Git 核心之外，還需要對常用的命令勤加練習，這裡就是練習祕籍。
手把手教你配置 Webpack + Vue + TypeScript 開發環境
這篇文章先是花了不少篇幅跟你解釋為什麼要選擇 .vue 檔案的方式來做 Vue.js 開發，接下來是為什麼選擇 TypeScript，然後手把手教你如何配置他們的開發環境，如果你做類似事情的時候遇到問題，這會是不錯的參考。
程式碼框架
Vue Typeahead：輸入框自動完成元件
Typeahead 這種互動方式已經很常見了，鼻祖就是 Google 的搜尋建議，這是 1 個為 Vue.js 開發的輸入框自動完成元件，做使用者介面和管理後臺的都應該能用得上。官網的 Demo 使用了 Twitter 的 API，使用可能不那麼流暢，即使翻牆了也是如此。
React 前後端同構應用框架 Next.js 釋出 2.0 版本
Next.js 在前端週刊第42期中已經收錄，其出現的主要動機是提供一個前後端同構應用的腳手架，Github star 數量超過 1W，近期正式釋出了 2.0 版本，其主作者在 React Conf 2017 上也 Next.js 做了演講和佈道，想在 React 前後端同構應用上少走彎路？強烈建議試試這個。
Vue.js 前後端同構應用框架 Nuxt.js
該專案受 React 領域中的 Next.js 啟發而產生，主要目的是便利大家開發 Vue.js 服務端渲染的應用，誕生的還比較晚，目前還沒有釋出 1.0 正式版，保守的同學可以再等等。側面反映了 Vue.js 在開發者群體中受歡迎的程度。
Choices：輕量級的輸入框、選擇列表擴充套件外掛
Choices.js 提供了類似於 Select2 和 Selectize 的輸入框和選擇列表擴充套件功能，但是不依賴 jQuery，原始碼很小，支援多種自定義配置，首頁有常見業務場景中需要的標籤輸入框、多選列表、單選列表、級聯選擇的 Demo。
精彩問答
為什麼優秀的程式設計師喜歡命令列？
要給優秀的程式設計師下一個明確的定義無疑是一件非常困難的事情。擅長抽象思維、動手能力強、追求效率、喜歡自動化、願意持續學習、對程式碼質量有很高的追求等等，這些維度都有其合理性，不過又都略顯抽象和主觀。這篇文章的作者有他獨到的觀點，我也非常贊同，文中列出了工程師可以通過命令列完成的很多事情。
ES6 中的 const 到底意味著什麼？
const 是 ES6 中變數宣告的新方式，表面意思是宣告的變數不可被改變，從底層來看，到底是什麼不可被改變？從其他語言轉 JS 的同學可能會有些疑惑。用 const 宣告的陣列或者物件，或者型別例項能否被改變？能被怎樣改變？你都清楚麼？
使用淘寶映象加速 Electron、Node-Sass 的安裝速度
可以說淘寶的映象給國內的開發者節省了很多時間，大到作業系統，小到各種工具。這篇短小的文章介紹瞭如何在專案中使用淘寶映象為 Electron 和 Node-Sass 的安裝加速，希望能縮短你的搭環境時間。
One More Thing
本文作者王仕軍，商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱知乎專欄：《前端週刊：讓你在前端領域跟上時代的腳步》。
Happy Hacking