投身烈火
Keep Walking

新版Create React App里的新鲜玩意儿

话说玩儿react的同学可能都知道Create React App这个项目吧(不知道的戳这里了解,这是来自Facebook官方的零配置命令行工具,能够帮你自动创建基于Webpack的最简易的React项目模板)。话说今天看期刊的时候发现了一篇react的官方blog更新了一篇叫What’s New in Create React App的博客,随手翻了下发现 Create React App 这个项目居然也更新新版本了?!而且还添加进来很多有趣的功能。我半翻译半解读一下这篇文章,咱们看看有哪些有趣的新功能吧。

Create React App 这个项目推出大概有一年了,作为一个官方推荐的快速搭建react项目的脚手架,这个项目吸引了大量的开发者。而这个项目在沉寂了几个月之后,于5月18号发布了1.0.0版本(最近这十四天有release了七次,真是猛啊……),添加了好多新的特性。如果你当前正在开发的应用是使用 Create React App 创建的,想体验新版本的特性,并且你的项目并没有执行弹出操作(Create React App 有个 eject命令),可以参考官方的升级说明来升级 Create React App。

webpack 2

虽然 webpack 2 相比 webpack 的改动很大,有可能存在很多问题,但是 webpack 2 已经正式发布几个月了,Create React App 团队经过了一段时间的测试,认为目前 webpack 2 已经足够稳定了,所以将模板中的构建工具也修改为 webpack 2。而且 Create React App 的用户并不需要担心 webpack 2 配置上的改动,Create React App 内部对 webpack 的配置进行了兼容。

如果你的项目已经执行过弹出操作了,则需要参考 webpack 提过的升级指南自己手动修改配置。

webpack 2 最引人注目的新特性就是其对 ES6 模块 的支持,可以将将 ES6 模块 直接转化为 CommonJS 模块。虽然这对开发来说可能没啥影响,但是它可以在编译阶段捕获更多的错误,比如exports 的变量undefined之类的:

whats-new-in-create-react-app-01

webpack 2 还提供了 tree shaking 特性,可以通过去除冗余代码,优化打包后脚本的尺寸。

Runtime Error Overlay

你有没有这种经历,代码中写错了一个地方,控制台里也报错了,但是死活找不到报错代码的位置……

为了解决这个问题,我们引入了一个专门捕获错误的弹窗,当程序报错的时候他会展示报错信息和引发错误的位置!当然,他只会出现在开发阶段,产出代码的时候会被去掉。

有图,有真相,就在这儿晒!

whats-new-in-create-react-app-02

更牛逼的是,他还能跟你的编辑器结合到一起,惊不惊喜?意不意外?

未来 Creat React App 还准备支持更多错误捕获。比如在React 16 版本发布之后,Creat React App 计划支持 React 组件调用栈的展示。

默认支持渐进式web应用

使用新版本 Creat React App 创建的项目默认就会支持 [渐进式web应用(PWA)] (https://developers.google.com/web/progressive-web-apps/),会使用 service workers 实现 缓存优先策略 来优化用户再次访问应用的速度。当然,你也可以通过设置默认不开启这个特性,但是如果你在开发新的应用,我推荐你使用它,特别是在移动设备上运行的应用,会有惊喜哦~

whats-new-in-create-react-app-03

关于 Creat React App 中 PWA 的配置,更详细的说明请戳这里

题外话,貌似最近 PWA 很火呢,前段时间看到 vue 官方也退出了基于自己框架的pwa脚手架,另外我还发现一个在线的 PWA 脚手架工具,有兴趣的可以玩儿玩儿,www.pwabuilder.com,回头有时间我也打算写一篇关于 PWA 的文章~

Jest 20

先科普一下,Jest 是facebook出的一个自动化测试工具,用来跑单测的。

新版的 Creat React App 使用的也是新版的 Jest,20版本的 Jest 包含了许多改进,具体有哪些修改自己看文档吧。

现在 Create React App 只需要做少量 Jest 的配置就可以生成覆盖率报告了。

whats-new-in-create-react-app-04

动态import()代码分割

保持应用初始化最小下载量和按需加载的重要性我就不说了哈,其实上个版本的 Create React App 也支持代码分割,不过是基于 webpack 的 require.ensure() 特性,这使得这部分代码没法通过 Jest 的测试。

在这个版本的 Create React App 中,我们加入了对未来web标准中 动态 import() 提案的支持,我建议你使用 import() 来延迟加载非常用组件。巧的是,上期的文章里也涉及到了这个问题,咱们来看看 Create React App 中的解决方案吧:

whats-new-in-create-react-app-05

更好的控制台输出

新版的 Create React App 改善了控制台的输出。举个例子,当你启动测试服务时,新版的 Create React App 除了会显示本地地址之外,还会显示局域网ip地址,这样你就能更快的用你的手机测试应用了,总之就是更注重细节了吧……╮( ̄▽ ̄)╭

whats-new-in-create-react-app-06

更多的特性

上面描述的其实只是新特性中的一小部分,这个版本中还包含了更多的特性,有兴趣的可以看看这个版本的 changelog

好的那么由于时间不足,本期的博客就先写到这里,如果不出意外的话,maybe可能也许大概下周五会更新吧,能不能准时更新,就全看米娜桑点赞转发安利留言的热情了~!

白了个白~!