共 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