微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

Create React App 2.0正式版发布,不再支持 Node 6

2018-10-05 21:01 前端之巅


作者|React 博客
译者|无明

Create React App 2.0 正式发布,带来的众多改进值得开发者一年的等待。

React 本身不需要任何构建依赖项,但如果没有快速的 test runner、minifier 和模块化代码库,开发一个复杂的应用程序可能会是一项巨大的挑战。从第一个版本开始,Create React App( https://github.com/facebook/create-react-app ) 的目标就是帮助开发者专注在最重要的事项上——应用程序代码,而 Create React App 会为开发者处理与构建和测试相关的事项。

它所依赖的很多工具已经发布了包含新功能和性能改进的新版本:Babel 7、Webpack 4 和 Jest 23。不过,手动更新它们并让它们能够很好地协同工作需要花费很多精力。这正是 Create React App 2.0 贡献者在过去几个月一直在忙的事情:迁移配置和依赖项,这样你就不需要自己动手进行了。

现在 Create React App 2.0 结束了 beta 阶段,让我们来看看它带来了哪些新特性以及如何使用它!

新特性

以下是最新版本的新特性清单:

  • 更多样式选项:你可以使用开箱即用的 Sass 和 CSS 模块。

  • 更新到 Babel 7,包括对 React 片段语法的支持,并修复了很多 bug。

  • 更新到 Webpack 4,可以更智能地自动拆分 JS 捆绑包。

  • 更新到 Jest 23,提供了用于查看快照的交互模式。

  • 可以使用 Apollo、Relay Modern、MDX 和其他第三方 Babel 宏变换。

  • 现在可以将 SVG 作为 React 组件导入,并用在 JSX 中。

  • 可以尝试移除了 node_modules 的实验性 Yarn Plug'n'Play 模式。

  • 现在可以在开发时插入自己的代理实现,以匹配后端 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

将一个项目升级到 Create React App 2.0 也很简单。在项目的根目录打开 package.json,找到 react-scripts。

将版本改为 2.0.3:

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

运行 npm install(或 yarn)。对于大多数项目,修改这一行配置足以!

这些技巧可以帮助你入门

在升级后第一次运行 npm start 时,它会问你想要支持哪些浏览器。按 y 接受默认值。它们将被写入 package.json 中,以后可以随时编辑它们。如果你只针对现代浏览器,Create React App 将根据这些信息生成较小的 CSS 包。

如果升级后 npm start 仍然不能正常工作,请查看发行说明中有关迁移的更详细的说明。这个版本有一些重大变化,但范围有限,所以应该不需要花费太多时间找出问题。请注意,为了减小 polyfill,现在支持旧版浏览器是可选的。

如果你之前退出但现在想要升级,一个常见的解决方案是找到你之前的提交,还原它们,然后升级。你需要的一些特性(比如 Sass 或 CSS 模块?)可能已经提供了内置支持。

重大变化

以下是这一版本的重大变更清单:

  • 不再支持 Node 6。

  • 对旧版浏览器(例如 IE 9 到 IE 11)的支持现在作为可选项,并由单独的软件包提供支持。

  • 使用 import() 进行代码拆分现在更接近规范,但禁用了 require.ensure()。

  • 默认的 Jest 环境现在包含 jsdom。

  • 支持将对象指定为代理设置已替换为支持自定义代理模块。

  • 对.mjs 扩展的支持被移除,等到它周围的生态系统稳定下来。

  • PropTypes 定义会自动从生产版本中移除。

如果这个清单中的任何一项对你有影响,可以查看 2.0.3 发行说明中更详细的信息。

 英文原文

https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

 活动推荐

12 月 7-8 日在北京国际会议中心举办的 ArchSummit 全球架构师技术峰会邀请了超过百位的国内外专业讲师,并设置了前端技术专题,分享他们的最新黑科技和研发经验。

目前大会 8 折优惠购票火热进行中,扫描以下图片二维码或点击“阅读原文”了解更多详情!

如有疑问欢迎咨询票务经理灰灰:17326843116(微信同号)

 
前端之巅 更多文章 重磅!尤雨溪发布Vue 3.0开发路线 Next.js 7.0正式发布:重新编译速度提高42%,支持WebAssembly CodeSandbox推出容器,进化为WebIDE 十年前端老兵:学习DApp开发,投身下一个浪潮 首屏时间从12.67s到1.06s,我是如何做到的?
猜您喜欢 专项测试为何物,有何价值? HTTP协议详解 一个32岁入门的70后程序员给我的启示 七牛云存储COO吕桂华:专注产品 服务好开发者 做程序猿的老婆应该注意的一些事情