前端週刊第54期：Prepack 引起社區小高潮

共 2048 字，讀完需 4 分鐘。你看到這篇文章的時候，在德國舉行的 2017 年 CSSConf.EU 和 JSConf.EU 應該已經閉幕了，從推特上放出來的資料來看，乾貨確實很多，好學的同窗有這個信息應該就夠了。Facebook 開源 JS 代碼優化工具 Prepack 的事情貌似又引起了社區的一波小高潮，相信理性的你也有本身的判斷。下面是本週精選內容，請享用！

技術動態

Chrome Headless 終於來了

Headless Chrome 在 Chrome 59 中已經可用，把 Chrome 的強大能力帶到了命令行中，搞瀏覽器端持續集成和功能測試的同窗能夠上手玩玩了？這篇文章做爲入門。稍微解釋下 Headless 的概念，只須要經過命令行去訪問，不須要用戶界面的工具均可稱之爲 Headless，早期的 PhantomJS 就屬於這種。

Facebook 開源 JS 代碼優化工具 Prepack

Facebook 近兩月在開源領域動做頻頻，最近又開源了 Prepack：優化 JS 源代碼的工具，實際上它是經過部分求值器（Partial Evaluator）在編譯時執行本來在運行時的計算過程，並經過代碼重寫來提其執行效率。該怎麼看待 Prepack？知乎上很多同窗從不一樣角度發表了見解。

文章教程

如何更好的組織 React 項目的代碼？

項目代碼的組織方式在很大程度上決定了新手上手項目的速度，項目後期的維護成本，基於代碼角色（好比 component、container、action、reducer）的代碼組織方式被不少人使用，也出如今不少腳手架工具中，那麼這種組織方式到底適不適合項目的長遠發展呢？從我的經驗來講，基於業務領域的頂層組織可能更適合長遠的可維護性。這篇文章給出了可行的代碼組織建議。

Nest：使用 TypeScript、面向對象和函數式思想寫後端

Nest 是一款使用 TypeScript 開發的 Node.js 框架，結合了面向對象和函數式編程的思想，基於 express 構建，對後端應用的結構作了更高的分層和抽象。你不必定須要使用，能夠透過這篇文章看看它的設計思想。

給 Node.js 新手：提升效率必備的工具和庫

很多剛入門 Node.js 的同窗可能都會問這個問題，新手該如何利用社區中的工具和庫最大程度的提升本身的效率呢？JS 語言基礎固然是不可少，由於若是你沒有提升效率的基礎知識，效率天然無從談起。接下來就是工具和庫的選擇，要作到儘可能少的浪費時間，這篇文章作了梳理，包括編輯器、代碼庫、命令行工具等幾大類。

關於監控的幾個基礎問題

若是你以爲系統監控跟前端沒啥關係，那就認識太侷限了。頁面的加載速度、JS 報錯的數量趨勢都是前端工程師應該負責的範疇，可是具體到監控，不少時候，作了跟沒作同樣，有時甚至都沒作。介紹監控的常識問題，很是值得你閱讀。

開發工具

pkg：把 Node.js 應用打包成可執行文件

zeit.co 出品的命令行工具，幫你把 Node.js 應用打包成可執行文件，能夠直接部署到任何環境，支持跨平臺，沒有 Node.js 運行時也是沒問題的。基於他你把 Node.js 應用打包成安裝包分發給客戶。國內貌似阿里有實踐，可是沒有系統的開源出來。

codecopy：讓你成爲更好的代碼摘抄員

或多或少，咱們都會從網頁粘貼代碼到本身的項目中，codecopy 是一款加速你代碼摘抄過程的瀏覽器插件，在頁面全部疑似代碼片斷的地方增長複製按鈕，目前支持 Chrome、Firefox，支持的網站基本包括了全部程序員常去的網站，好比 GitHub、GitLab、Medium、NPM 等。

create-next-app：快速開始 React + Next.js 項目

create-next-app 看名字就很像 create-react-app，可以快速的幫你開始一個 React + Next.js 的項目，Next.js 很少解釋了。該命令行工具簡化項目初始化以外，還提供了超過 10 個項目模板供你選擇，好比你能夠選擇性的加入 Redux 或者 Mobx 等 React 全家桶玩具。

AppiconMaker：幫你生成跨平臺的應用圖標

AppiconMaker 是一款在線的圖標縮放工具，你提供原圖，它輸出能直接導入到
Xcode 或 Android Studio 的不一樣尺寸的應用圖標，若是想用離線版本，能夠看看 makeappicon.com。

代碼框架

rn-splash-screen：用 JS 控制的 APP 閃屏組件

APP 閃屏是 iOS 中率先使用的提升用戶感知速度的設計，後來部分 APP 拓展了這個設計的外延，在啓動的時候展現或者播放廣告，在 React Native 中也是能夠實現的，這個庫同時支持 iOS 和 Android。

react-native-masonry：靈活的磚塊佈局組件

磚塊佈局（Masonry Layout）經常使用來展現多列的多圖頁面，在 WEB 端和 APP 端都比較常見，react-native-masonry 給你提供了能夠直接在 react-native 中使用的組件，支持動態列、圖片漸進加載以及事件綁定。

視頻教程

egghead.io：20 分鐘掌握 async/await

async/await 能讓 JS 的可讀性再上一個臺階，但實際使用中你可能仍是會碰到很多問題，好比如何和匿名函數、箭頭函數結合使用？多個 async 如何排列性能最好？花 20 分鐘學習下這裏的課程，或許你能發現本身以前的不正確用法。

精彩問答

Git 如何提交只改了文件名大小寫的變動？

在對文件命名大小寫不敏感的文件系統中，若是你改了文件名（只是大小寫變化），Git 默認模式是識別不了這種變化的，天然就沒法提交，那該怎麼作呢？有很多方法，看看 StackOverflow 的討論。固然繞過這個問題的辦法是約定全部的文件名小寫。

如何知道倉庫的代碼行數？

有句話，可能不少人忽略，可是倒是個不爭的事實：沒有 BUG 的代碼就是沒有代碼。優秀的工程師是能用更短小、簡潔的代碼寫出相同的功能的，即便第一次沒有寫出來這種代碼，他經過後續的重構也能達到，那麼怎麼跟別人證實重構能讓代碼變少呢？你須要一個計算代碼行數的工具。

One More Thing

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

Happy Hacking