共 1867 字，讀完需 4 分鐘，速讀需 1 分鐘。本周收錄的內(nèi)容包含主流前端框架 React、Vue.js、Angular 的版本更新和周邊擴展；CSS 方面，Grid 布局是值得關(guān)注的；開發(fā)效率方面，有 2 篇關(guān)于 Git、Webpack 的技巧。內(nèi)容如下，請享用。

技術(shù)動態(tài)

Angular 4.0.0 正式版發(fā)布

Angular 近期發(fā)布了 4.0 正式版，筆者只能感嘆前端社區(qū)的版本號真是越來越逆天了，4.0 版本與 2.x 版本幾乎是完全兼容的，內(nèi)含的改進包括：更小的文件體積、視圖引擎的大幅度改進，能節(jié)省模板編譯產(chǎn)生的代碼 60% 左右，此外還提供了支持服務端渲染的項目參考、最新版本的 TypeScript 支持等?？雌饋?Google 在 Angular 上投入了很大的精力，你跟么？

微信小程序 6 大新能力全面解讀

微信小程序在 3 月 27 日晚 10 點突然爆出大新聞。微信為小程序開放了 6 大新能力，在知曉程序的這篇文章中，你將看到小程序 6 大新能力的最靠譜解讀。

輕松一刻：left-pad 事件周年紀

去年這個時候，JS 社區(qū)發(fā)生了讓很多開源包和開發(fā)者奔潰的 "left pad" 事件，隨后就有人唱衰 JS 社區(qū)，但是整個社區(qū)又做了很多事情來避免類似問題，這里是一些比較有趣的推特內(nèi)容，無聊的時候可以看看。

文章教程

通過實例搞懂 Grid 和 Flexbox 兩種布局方式

做前端的同學不光要著眼于 JS 的變化，CSS 領(lǐng)域也在不斷演化，從早期的 table 布局，到后來的 div + css 布局，再到 flexbox 布局，現(xiàn)在出現(xiàn)了更好用的 grid 布局，對于新出的這兩種，flexbox 和 grid 有何異同？對比起來可能學習更快。

透視 webpack 構(gòu)建，把 CommonsChunkPlugin 用到極致

webpack 官方開發(fā)組在 twitter 上發(fā)起了一個活動，讓大家使用 webpack-bundle-analyzer 把打包后的 webpack 依賴可視化截圖發(fā)出來，然后給診斷 webpack 配置不合理的地方，這篇文章把大家典型的錯誤姿勢做了糾正，你需要自己研究下，很大概率，你用的姿勢也不對。

聲明 Vue.js 組件模板的 7 種姿勢

這篇文章梳理了聲明 Vue.js 組件模板的 7 種方式，并舉了比較具體的例子來說明，當然這其中方式在代碼可讀性、可維護性、模塊化等方面都有不小的差別，你所要做的就是漲點只是，選取自己最舒適的。

開發(fā)工具

最常用的 Git 奇技淫巧

這里列出了超過 50 個 Git 相關(guān)的技巧，給出了每個技巧需要的命令和能解決的問題，想真正掌握 Git 操作？除了看 Git 內(nèi)核之外，還需要對常用的命令勤加練習，這里就是練習秘籍。

手把手教你配置 Webpack + Vue + TypeScript 開發(fā)環(huán)境

這篇文章先是花了不少篇幅跟你解釋為什么要選擇 .vue 文件的方式來做 Vue.js 開發(fā)，接下來是為什么選擇 TypeScript，然后手把手教你如何配置他們的開發(fā)環(huán)境，如果你做類似事情的時候遇到問題，這會是不錯的參考。

代碼框架

Vue Typeahead：輸入框自動完成組件

Typeahead 這種交互方式已經(jīng)很常見了，鼻祖就是 Google 的搜索建議，這是 1 個為 Vue.js 開發(fā)的輸入框自動完成組件，做用戶界面和管理后臺的都應該能用得上。官網(wǎng)的 Demo 使用了 Twitter 的 API，使用可能不那么流暢，即使翻墻了也是如此。

React 前后端同構(gòu)應用框架 Next.js 發(fā)布 2.0 版本

Next.js 在前端周刊第42期中已經(jīng)收錄，其出現(xiàn)的主要動機是提供一個前后端同構(gòu)應用的腳手架，Github star 數(shù)量超過 1W，近期正式發(fā)布了 2.0 版本，其主作者在 React Conf 2017 上也 Next.js 做了演講和布道，想在 React 前后端同構(gòu)應用上少走彎路？強烈建議試試這個。

Vue.js 前后端同構(gòu)應用框架 Nuxt.js

該項目受 React 領(lǐng)域中的 Next.js 啟發(fā)而產(chǎn)生，主要目的是便利大家開發(fā) Vue.js 服務端渲染的應用，誕生的還比較晚，目前還沒有發(fā)布 1.0 正式版，保守的同學可以再等等。側(cè)面反映了 Vue.js 在開發(fā)者群體中受歡迎的程度。

Choices：輕量級的輸入框、選擇列表擴展插件

Choices.js 提供了類似于 Select2 和 Selectize 的輸入框和選擇列表擴展功能，但是不依賴 jQuery，源代碼很小，支持多種自定義配置，首頁有常見業(yè)務場景中需要的標簽輸入框、多選列表、單選列表、級聯(lián)選擇的 Demo。

精彩問答

為什么優(yōu)秀的程序員喜歡命令行？

要給優(yōu)秀的程序員下一個明確的定義無疑是一件非常困難的事情。擅長抽象思維、動手能力強、追求效率、喜歡自動化、愿意持續(xù)學習、對代碼質(zhì)量有很高的追求等等，這些維度都有其合理性，不過又都略顯抽象和主觀。這篇文章的作者有他獨到的觀點，我也非常贊同，文中列出了工程師可以通過命令行完成的很多事情。

ES6 中的 const 到底意味著什么？

const 是 ES6 中變量聲明的新方式，表面意思是聲明的變量不可被改變，從底層來看，到底是什么不可被改變？從其他語言轉(zhuǎn) JS 的同學可能會有些疑惑。用 const 聲明的數(shù)組或者對象，或者類型實例能否被改變？能被怎樣改變？你都清楚么？

使用淘寶鏡像加速 Electron、Node-Sass 的安裝速度

可以說淘寶的鏡像給國內(nèi)的開發(fā)者節(jié)省了很多時間，大到操作系統(tǒng)，小到各種工具。這篇短小的文章介紹了如何在項目中使用淘寶鏡像為 Electron 和 Node-Sass 的安裝加速，希望能縮短你的搭環(huán)境時間。

One More Thing

本文作者王仕軍，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。如果你覺得本文對你有幫助，請點贊！如果對文中的內(nèi)容有任何疑問，歡迎留言討論。想知道我接下來會寫些什么？歡迎訂閱知乎專欄：《前端周刊：讓你在前端領(lǐng)域跟上時代的腳步》。

Happy Hacking