Create React App 2.0: 集成Babel 7,Sass...

create-react-app 在2018-09-26发布了2.0版本和2个小版本，目前是2.0.2

2.0版本之前是1.5.2， 1.5.2版本是2018年2月份发布的，时隔半年之多终于迎来了一次革命性的大改变。

虽然React本身不需要任何构建依赖性，但编写一个没有快速测试运行器，生产minizer和模块化代码库的复杂应用程序可能具有挑战性。从第一个版本开始， Create React App 的目标就是帮助您专注于最重要的事项 - 您的应用程序代码 - 并为您处理构建和测试设置。

它依赖的许多 工具 自那时起发布了包含新功能和性能改进的新版本：Babel 7， webpack 4 和Jest 23。但是，手动更新它们并使它们一起工作需要花费很多精力。这正是 Create React App 2.0贡献者 在过去几个月一直忙于的事情： 迁移配置和依赖项，这样您就不需要自己动手了。

现在Create React App 2.0还没有测试版，让我们看看有什么新东西以及如何尝试它！

注意

不要感到压力升级任何东西。如果您对当前功能集，性能和可靠性感到满意，则可以继续使用当前版本！在生产中切换到2.0之前让2.0版本稳定一点可能也是一个好主意。
复制代码

什么是新的

以下是此版本中新功能的简短摘要：

• :tada:更多样式选项：您可以直接使用 Sass 和 CSS模块 。
• :tropical_fish:我们更新到Babel 7，包括对React片段语法和许多错误修正的支持。
• :package:我们更新到webpack 4，它可以更智能地自动拆分JS包。
• :black_joker:我们更新到Jest 23，其中包括用于查看快照的交互模式。
• :gem:您可以使用 Apollo ， Relay Modern ， MDX 和其他第三方Babel Macros变换。
• :stars:现在可以将 SVG作为React组件导入 ，并在JSX中使用它。
• :cat2:您可以尝试删除的实验性 Yarn Plug’n’Play mode node_modules。
• 现在，您可以在开发中 插入自己的代理实现 ，以匹配您的后端API。
• :rocket:您现在可以使用 为最新Node版本编写的包 而不会破坏构建。
• :lipstick:如果您只打算定位现代浏览器，现在可以选择获取较小的CSS包。
• :construction_worker:♀️可以选择性使用 Service workers，它使用 Google’sWorkbox 构建。

所有这些功能都是开箱即用的- 要启用它们，请按照以下说明操作。

使用Create React App 2.0启动项目

您无需更新任何特殊内容。从今天开始，当您运行 create-react-app 它时，默认情况下将使用2.0版本的模板。玩的开心！

如果由于某种原因想要 使用旧的1.x模板 ，可以通过--scripts-version=react-scripts@1.x作为参数传递来实现create-react-app。

更新项目以创建React App 2.0

升级到Create React App 2.0通常应该很简单。 package.json 在项目的根目录中打开并找到 react-scripts 。

然后将其版本更改为2.0.3：

// ... other dependencies ...
  "react-scripts": "2.0.3"
复制代码

运行npm install（或者yarn，如果您使用它）。对于许多项目，修改这一行就足以升级了！

这里有一些技巧可以帮助您入门。

当您 npm start在升级后第一次运行时 ，您会收到一个提示，询问您希望支持哪些浏览器。按y接受默认值。它们会写入您的package.json，您可以随时编辑它们。如果您只针对现代浏览器，则创建React App将使用此信息生成较小的CSS包。

如果npm start升级后仍然无法正常工作， 请查看发行说明中更详细的迁移说明 。有是此版本中的几个重大的变动，但他们的范围是有限的，所以他们不应该超过几个小时进行梳理。请注意，现在可以选择 支持旧版浏览器 以减少polyfill的大小。

如果您之前已经弹出但现在想要升级，一个常见的解决方案是找到您弹出的提交（以及任何后续提交更改配置），还原它们，升级，然后再选择再次弹出。您现在支持开箱即用的功能（可能是Sass或CSS模块？）也是可能的。

注意

由于npm中可能存在错误，您可能会看到有关未满足的对等依赖项的警告。你应该可以忽略它们。据我们所知，Yarn没有这个问题。
复制代码