前端周刊第 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