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

2,081

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 7webpack 4Jest 23。但是,手动更新它们并使它们一起工作需要花费很多精力。这正是Create React App 2.0贡献者在过去几个月一直忙于的事情:迁移配置和依赖项,这样您就不需要自己动手了。

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

注意

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

什么是新的

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

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

使用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没有这个问题。

突破性变化

以下是此版本中重大更改的简短列表:

  • 不再支持Node6 , 请升级到8.x
  • 对旧版浏览器(例如IE 9到IE 11)的支持现在可以选择使用单独的软件包
  • import()现在,代码分割的行为更接近于规范,同时require.ensure()被禁用。
  • 默认的Jest环境现在包含jsdom。
  • 支持将对象指定为proxy设置已替换为对自定义代理模块的支持。
  • 对.mjs扩展的支持被删除,直到它周围的生态系统稳定下来。
  • PropTypes定义会自动从生产版本中删除。

如果这些点中的任何一个对您有影响,则2.0.3发行说明包含更详细的说明。

翻译自官方Blog