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

栏目: CSS · 发布时间: 5年前

内容简介:create-react-app 在2018-09-26发布了2.0版本和2个小版本,目前是2.0.22.0版本之前是1.5.2, 1.5.2版本是2018年2月份发布的,时隔半年之多终于迎来了一次革命性的大改变。虽然React本身不需要任何构建依赖性,但编写一个没有快速测试运行器,生产minizer和模块化代码库的复杂应用程序可能具有挑战性。从第一个版本开始,

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:更多样式选项:您可以直接使用 SassCSS模块
  • :tropical_fish:我们更新到Babel 7,包括对React片段语法和许多错误修正的支持。
  • :package:我们更新到webpack 4,它可以更智能地自动拆分JS包。
  • :black_joker:我们更新到Jest 23,其中包括用于查看快照的交互模式。
  • :gem:您可以使用 ApolloRelay ModernMDX 和其他第三方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没有这个问题。
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Algorithm Design

Algorithm Design

Jon Kleinberg、Éva Tardos / Addison-Wesley / 2005-3-26 / USD 144.20

Algorithm Design introduces algorithms by looking at the real-world problems that motivate them. The book teaches students a range of design and analysis techniques for problems that arise in compu......一起来看看 《Algorithm Design》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具