前端週刊第51期：1000個包的男人 + Vue.js + React Native + 奇技淫巧

Node.js 社區最高產的工程師 Sindre Sorhus 本週發佈了他的第 1000 個 npm 包，詳見這裏，據 npm 官方統計，全網的 npm 包下載量中有 12% 都跟 Sindre Sorhus 有關。看到這個，你做何感想？另外，部分精彩的文章我已經翻譯成中文發到知乎專欄上，就沒有收錄到前端週刊。下面是本週的精選內容，請享用！

技術動態

谷歌推人工智能繪圖工具 AutoDraw

AutoDraw 是谷歌推出的人工智能繪圖工具，能根據你的手稿做爲啓發式信息，而後列出你可能想畫的內容，對於畫畫很差的同窗可能會頗有幫助，不畫畫不要緊，當個玩具也能夠。爲何發在前端週刊？你對它的前端是怎麼作不感興趣麼？

Vue Conf 2017 報名入口

全球首屆 Vue.js 開發者大會將於 2017 年 5 月 20 日在北京航空航天大學新主樓會議中心舉辦。Vue.js 做者將出席本次大會，並發表主題演講。這裏是報名入口，早鳥票當天就被搶光了，你若是有女友，能夠帶過去，哈哈！

微信公衆號能夠註銷了

微信公衆號近期宣佈支持自主註銷，用戶在覈實身份信息或者驗證賬號主體後，能夠在公衆號後臺發起註銷流程。賬號完成註銷後，主體註冊次數、運營者身份證信息、手機號碼、賬號暱稱、管理員微信號、註冊郵箱等，都可釋放。

如何評價微軟開源的 ReactXP ？

微軟在開源領域動做愈來愈多，上週開源了 ReactXP，生成能開發跨平臺的 React 應用，怎麼客觀的評價這個動做呢？看看知乎上你們的討論。

文章教程

圖解 Chrome 中的滾動錨定機制

看到這個的時候，再次感慨 Google 作產品就是在作用戶體驗，不知道你沒有遇到過，打開了一個長頁面，已經開始閱讀，忽然頁面跳了一下，丟失了你的瀏覽進度，這一般是由於你看的內容上面還有未加載完成的內容，它加載完就把下面的內容擠下去，產生頁面跳躍的感知。Chrome 瀏覽器已經對這種體驗問題作了優化，用了叫作 Scroll-Anchroing 的技術，技術方案細節在本文內的某個連接上。

集成 Nuxt.js 到現有的 Node.js 項目

Nuxt.js 是基於 Vue.js 的先後端同構應用腳手架，Feathers 是 Node.js 的 MVC 框架，固然絕大多數同窗在公司不會是從頭開始一個新的項目，這篇文章講了如何把 Nuxt.js 集成到現有的 Feathers 應用中去，對其餘的 MVC 框架也有參考價值。

酷殼：如何重構「箭頭型」代碼？

「箭頭型代碼」若是嵌套太多，可能看起來很美，由於對稱，可是讀起來想吐血，由於太長，會至關容易讓維護代碼的人（包括本身）迷失在代碼中，由於看到最內層的代碼時，你已經不知道前面的那一層一層的條件判斷是什麼樣的，代碼是怎麼運行到這裏的，因此，那怎麼能不寫出這種代碼呢？這篇文章提供了思路。

Chrome 裏面的 Coverage 功能究竟是如何工做的？

我本週發了篇文章介紹 Chrome Canary 裏面的運行時代碼覆蓋率功能，這篇文章從源代碼的層面研究了這個代碼覆蓋率功能究竟是怎麼實現的，文中有彩蛋，看到你就會本身開發 Dev Tools 啦。

開發工具

GitHub：開源項目運維自動化工具箱

GitHub 官方整理的能幫助你運維開源項目的工具列表，能把平常的大部分運營工做自動化，好比代碼風格檢查、持續集成、包管理、變動日誌生成、自動找 Reviewer、依賴包過時提醒。說實話，大部分工具其實能夠用到公司內部的工程化實踐中，前提是你願意花時間去學習折騰。

alinode：基於 Node.js 運行時的應用性能管理解決方案

官方說法：alinode 是阿里雲出品的 Node.js 應用服務解決方案，幫助開發者迅速洞見性能細節，快速定位疑難雜症，直探問題根源。個人說法：沒有調查就沒有發言權，準備近期使用，以後總結心得出來。

代碼框架

React Native 微信功能集成實例

該倉庫在 React Native 中集成了微信登陸、收藏、分享、付款功能，支持 Android 和 iOS 版本，若是你最近在研究 React Native，接下來你極可能會有相似的需求。

VMS：基於 Vue.js 2.0 的 CMS 系統

相似項目收錄過兩個，前端相似 vue-admin，可是包含了完整的 Node.js 後端，有比較簡單的權限控制（對於複雜的應用略顯簡陋），集成了常見的後臺管理所需的組件：如 WangEditor 富文本編輯器、輕量級 Markdown 編輯器、七牛雲圖片上傳、極光推送等。

視頻教程

使用 Nuxt.js 和 Vuex 構建 Vue.js 服務端渲染應用

Nuxt.js 和 Vuex 是啥這裏就不廢話了，來自 egghead.io 的課程，從 0 開始，教你如何如何使用 Next.js 來組織應用代碼，Vuex 管理狀態。

精彩問答

toolingtips：如何在 git grep 的時候默認顯示行號？

Git 相信不少人都熟悉，grep 自命令可用來快速查找，可是默認的查找結果不顯示匹配的代碼在哪一行，這其實不利於效率的提高，由於大機率你定位到文件以後還要去文件裏再搜一遍才能定位到行，爲何不一步搞定呢？看看這裏的第 2 個答案，修改的文件時 ~/.gitconfig。

toolingtips：如何高效的操做 Mac 中的 Finder 和截圖

Mac 中的文件系統管理器 Finder 和截圖相信是不少人經常使用的，這個帖子裏面有些小技巧能讓你事半功倍，至少不依賴第三方軟件，你肯定不去看看？注意是第 1 和第 3 個答案。

toolingtips：如何讓 mongoose 填充嵌套的關聯字段

超過 3 個表的關聯在複雜的業務中很是常見，mongoose 中有個 populate 查詢語法，能夠按字段填充關聯表裏面的數據，那怎麼填充嵌套的關聯表數據呢？看這裏的第2 個答案。順道吐槽下 mongoose 的文檔，誰看誰噁心。

One More Thing

本文譯者王仕軍，商業轉載請聯繫做者得到受權，非商業轉載請註明出處。若是你以爲本文對你有幫助，請點贊！若是對文中的內容有任何疑問，歡迎留言討論。想知道我接下來會寫些什麼？歡迎訂閱知乎專欄：《前端週刊：讓你在前端領域跟上時代的腳步》。

Happy Hacking