注:本文翻译自 React 官方博客,并且已经更新到最新的 React 中文文档中,你也可以在这里查看本文:http://react.css88.com/blog/2018/10/01/create-react-app-v2.html
Create React App 2.0 已于今天发布,它在一些单独依赖项更新中带来了一年的改进。
虽然 React 本身 不需要任何构建依赖项,但是在没有快速测试运行器,用于生产环境的压缩工具和模块化代码库的情况下,编写一个复杂的应用程序可能具有一定的挑战性。 从第一个版本开始,Create React App 的目标就是帮助您专注于最重要的事情上 – 您的应用程序代码 – 而 Create React App 会为您处理构建和测试相关的事宜。
Create React App 依赖的许多工具已经发布了包含新功能和性能改进的新版本:Babel 7, webpack 4, 和 Jest 23。但是,手动更新它们并使它们能够很好地协同工作需要花费很多精力。 这正是 Create React App 2.0 贡献者 在过去几个月一直在忙的事情:迁移配置和依赖项,这样您就不需要自己动手了。
现在 Create React App 2.0 完成了测试,正式发布了,让我们看看有什么新东西以及如何尝试它!
注意
升级任何东西请不要感到有压力。 如果您对当前版本的功能集,性能和可靠性感到满意,则可以继续使用当前版本! 在转换到生产环境之前,让2.0版本稳定一点也可能是一个好主意。
有哪些新特性
以下是这个版本中一些新功能的简短摘要:
- 更多样式选项:您可以直接使用 Sass (Sass 中文文档) 和 CSS Modules。
- 我们更新到了 (https://babeljs.io/blog/2018/08/27/7.0.0),包括支持 React fragment(片段) 语法,并修复了很多 bug。
- 我们更新到了 webpack 4,它可以更智能地自动拆分JS包。
- 我们更新到了 Jest 23,其中包括用于查看快照的 交互模式。
- 我们添加了 PostCSS ,因此您可以在旧浏览器中使用新的CSS功能。
- 您可以使用 Apollo,Relay Modern,MDX,和其他第三方Babel Macros(宏)转换。
- 现在可以将SVG作为 React 组件 import(导入),并在JSX中使用它。
- 您可以尝试实验性的Yarn Plug’n’Play模式 ,以删除
node_modules
。 - 现在,您可以在开发中插入自己的代理实现,以匹配后端API。
- 您现在可以使用为 最新 Node 版本编写的包 而不会破坏构建。
- ?? 如果您只打算兼容现代浏览器,现在可以选择获得较小的CSS包。
- ♀? 现在可以选择性加入 Service Worker,并使用 Google 的 Workbox 构建。
所有这些功能都是开箱即用的 – 要启用它们,请按照以下说明操作。
用 Create React App 2.0 开始一个新项目
您无需特地的更新任何内容。 从今天开始,当您运行 create-react-app
时,它将默认使用2.0版本的模板。 祝你玩得开心!
如果由于某种原因想要继续使用旧的 1.x 模板,你可以在 create-react-app
后面跟上参数--scripts-version=react-scripts@1.x
来实现。
将一个项目更新到 Create React App 2.0
将一个 non-ejected 项目升级到 Create React App 2.0 通常应该很简单。 在项目的根目录中打开 package.json
,然后找到 react-scripts
。
然后将其版本更改为 2.0.3
:
// ... 其他依赖项 ... "react-scripts": "2.0.3"
运行 npm install
(如果你试用Yarn,则运行 yarn
)。对于大多数项目来说,修改这一行配置就够了!
在Create React App 2.0 环境下工作… 感谢所有新功能
— Stephen Haney (@sdothaney) October 1, 2018
在这里,还有一些技巧可以帮助您入门。
当你在升级后第一次运行 npm start
时,你会得到一个提示,询问你想要支持哪些浏览器。按 y
接受默认值。它们会被写入你的 package.json
中,你可以随时编辑它们。Create React App 将使用此信息生成较小或 polyfill 的 CSS 包,具体取决于您的目标是以现代浏览器还是旧浏览器。
如果在升级后,npm start
仍然不能正常工作,请在发布说明中查看更详细的迁移说明。在这个版本中有一些重大变化,但是它们的范围是有限的,所以应该不需要花费几个小时来解决问题。请注意,支持旧版浏览器现在可选的,这样以减少 polyfill 的大小。
如果您之前已经 ejected 但现在想要升级,一个常见的解决方案是找到您 ejected 的提交(以及任何后续提交更改配置),还原它们,升级,然后再选择再次 ejected 。你现在支持开箱即用的功能(也许是 Sass 或 CSS Modules?)可能已经提供了内置支持。
注意
由于 npm 中可能存在错误,您可能会看到有关 unsatisfied peer 依赖项的警告。 你应该可以忽略它们。 据我们所知,Yarn 没有这个问题。
重大更改
以下是此版本中重大更改的简短列表:
- 不再支持Node 6。
- 对旧版浏览器(例如 IE 9 到 IE 11 )的支持现在可选的,你可以使用单独的软件包。
- 使用
import()
进行代码拆分,现在更接近于规范,禁用了require.ensure()
。 - 默认的 Jest 环境现在包含了 jsdom 。
- 支持将对象指定为
proxy
设置已替换为对自定义代理模块的支持。 - 删除了对
.mjs
扩展的支持,直到它周围的生态系统稳定下来。 - PropTypes 定义会自动从生产版本中删除。
如果这些点中的任何一个对您有影响,请查看2.0.3发行说明中更详细的说明。
更多学习
您可以在 发行说明 中找到完整的更改日志。 这是一个更改很大的版本,我们可能错过了一些东西。 你也可以向我们的 问题跟踪 报告任何问题,我们会尽力提供帮助。
注意
如果您一直在使用 2.x alpha 版本,我们会为它们提供 单独的迁移说明。
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂