Create React App 2.0: Babel 7, Sass, and More

Create React App 2.0 已于今天发布，通过单个依赖更新即可获得一整年的改进。

虽然 React 本身不需要任何构建依赖，但如果没有快捷的测试运行器、代码压缩工具、模块化工具的情形下，编写复杂的应用程序是非常具有挑战性的。自从第一次发布以来，Create React App 的目标就是帮助你处理构建和测试设置，让你能聚焦于最重要的应用程序代码编写。

它所依赖的许多工具都已经发布了包含新特性和性能改进的新版本：Babel 7、webpack 4 以及 Jest 23。 然而，手动更新它们并使它们协同工作，仍然需要很多的工作。 这正是过去几个月来 Create React App 2.0 贡献者一直在忙的事情：使你不需要自行迁移配置和依赖项。

现在，Create React App 2.0 已经不在是测试版本了，让我们来看看有什么新功能，以及如何尝试使用它!

注意

不要害怕升级。如果您对当前的功能、性能和可靠性感到满意，可以继续使用当前的版本。当 2.0 版本更稳定的时候，再用于生产环境也是不错的注意。

有什么新特性

以下是该版本新特性的概要说明：

• 🎉 更多样式选项：你可以使用 Sass 以及 CSS Modules。
• 🐠 升级到了 Babel 7，包含了对 React fragment syntax 的支持以及许多 bug 修复。
• 📦 升级到了 webpack 4，可以更智能的自动拆分 JS 包。
• 🃏 升级到了 Jest 23，支持以交互模式查看快照。
• 💄 支持 PostCSS，让你可以以最新的 CSS 语法编写兼容老旧浏览器的样式代码。
• 💎 你可以使用 Apollo、Relay Modern、MDX 以及其他三方的基于 Babel Macros 的转换器。
• 🌠 你可以将 SVG 作为组件导入，并且可以在 JSX 中使用。
• 🐈 你可以尝试使用实验性的 Yarn Plug’n’Play 模式 来移除 node_modules.
• 🕸 你可以在开发模式下注入你自己的代理实现 来匹配你的后端 API。
• 🚀 你可以在不破坏构建的情况下使用为最新版本 Node 编写的包。
• ✂️ 可以为现代浏览器，选择构建更小巧的 CSS 包。
• 👷‍♀️ 可选 Service workers ，并且内置支持使用 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

升级一个非弹出模式的项目到 Create React App 2.0 通常是非常直接的。打开 package.json 文件，在根节点中，找到 react-scripts 的地方。

然后修改版本号为 2.0.3：

  // ... 其他依赖项 ...
  "react-scripts": "2.0.3"

运行 npm install（或者 yarn）。 对许多项目来说，一行改动就可以完成升级。

正常工作... 谢谢所有的新特性。 👍

— Stephen Haney (@sdothaney) October 1, 2018

当你开始使用时，还有一些建议给到你。

当你升级之后第一次运行 npm start 你将会看到一个控制台提示询问你打算要支持的浏览器。请输入 y 来选择默认的那一个。你的选择将会被写入到 package.json，之后你可以随时修改它们。Create React App 会根据这个信息来为你的现代浏览器提供更小的 CSS 捆绑包，或者为老旧浏览器提供 css polyfill。

当 npm start 在升级之后仍不能完全工作， 请先仔细检查发布日志中的升级说明。在本次发布中有一些破坏性变更，但它们的影响返回是有限的，它们不需要花几个小时来整理。注意，为了减少垫片的大小，[支持老旧浏览器 (https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md) 当前是可选功能。

如果你之前选择了弹出配置，现在又想升级， 一个通用的方案是先回退到你弹出时的版本（以及任何更改配置的后续提交），然后升级，随后视情况把你之后的更改再注入一次。很有可能你扩充的功能当前已经支持了。

注意

由于 NPM 的 Bug，你可能会在 unsatisfied 的对等依赖中发现警告。建议忽略该警告。据我们所知，目前 Yarn 没有该问题。

破坏性变更

本次发布中的破坏性变更如下：

• 不在支持 Node 6。
• 通过可选的 独立包 支持了老旧浏览器(IE 9 ~ IE 11)。
• 使用 import() 来实现代码分割更接近规范，一段时候后 require.ensure() 将被禁用。
• 默认的 Jest 运行环境包含 jsdom。
• 使用自定义代理模块来代替 proxy 对象配置。
• 移除了对于 .mjs 的支持。等待周边生态稳定。
• 在产线构建中，会自动剥离 PropTypes 定义。

如果这些变更对你有影响，2.0.3 发布说明 有更详细的说明。

了解更多

你可以在发布说明中找到完整的变更日志。这是一个大的发布，我们可能会遗漏一些事情。请通过问题跟踪器 反馈给我们，我们将尽可能的给予帮助。

注意

如果你使用 2.x 的早期版本，我们提供了 独立的迁移说明。

Thanks

如果没有我们优秀的贡献者社区，这个版本是不可能发布的。感谢 Andreas Cederström, Clement Hoang, Brian Ng, Kent C. Dodds, Ade Viankakrisna Fadlil, Andrey Sitnik, Ro Savage, Fabiano Brito, Ian Sutherland, Pete Nykänen, Jeffrey Posnick, Jack Zhao, Tobias Koppers, Henry Zhu, Maël Nison, XiaoYan Li, Marko Trebizan, Marek Suscak, Mikhail Osher以及其他为该版本提供反馈和测试贡献者。