Babel@7.0.0 新版本巨变,是否该换用?

面试官:小伙子,你的数组去重方式惊艳到我了

Babel是一种流行的JavaScript编译器,旧版本的Babel在处理JSX语法等新特性时,需要安装额外的插件和预设。然而,Babel 7.0.0 新版本已经发布,它对Babel的核心进行了重构,带来了重大的变化。那么我们是否应该使用新版本的Babel呢?

变化

Babel 7.0.0主要的变化是将Babel的核心库拆分成了多个包。因此,用户不必要安装那些不需要的插件,这将有效地减少构建时间和内存使用。以下是Babel 7.0.0的新核心库:

  • @babel/core - 用来转换代码的核心库。
  • @babel/cli - 命令行接口。
  • @babel/preset-env - 自动根据当前的运行环境选用需要的插件。
  • @babel/preset-react - 处理React JSX语法。
  • @babel/preset-typescript - 处理TypeScript语法。

此外,Babel 7.0.0 还提供了一些其他的变化和新特性:

  • 支持TypeScript,可以使用@babel/preset-typescript预设来将TypeScript转换成JavaScript。
  • 新增了一个配置文件babel.config.js,可以方便地配置Babel的选项。
  • 移除了一些不被广泛使用的插件和语法特性,例如babel-preset-es2015、babel-plugin-transform-strict-mode等。

学习和指导

如果你已经成功地使用旧版本的Babel,那么升级到Babel 7.0.0需要一些学习和调整。在升级Babel之前,请确认你已经备份了项目文件。

升级到Babel 7.0.0的步骤如下:

  1. 安装新的核心包@babel/core和CLI@babel/cli。
- --- ------- ---------- ----------- ----------
  1. 将Babel配置文件(.babelrc)转换为新配置文件(babel.config.js)。
- --- ------------- -------
  1. 使用新的预设和插件。

对于大多数项目,你可以使用@babel/preset-env将你的代码转换成符合当前环境要求的语法:

-
  ---------- ---------------------
-

如果你使用了React,在.babelrc中,你需要将"presets"改为"plugins",并加上@babel/preset-react:

-
  ---------- -----------------------
-

同样地,如果你使用了TypeScript,在.babelrc中,你需要加入@babel/preset-typescript:

-
  ---------- ----------------------------
-

示例代码

原始代码

------ ------ - --------- - ---- --------
------ --------- ---- -------------

----- -------- ------- --------- -
  -------- -
    ------ ----------- -------------------------
  -
-

------------------ - -
  ----- ----------------------------
--

------ ------- ---------

转换后的代码

---- --------

--- ------ - -----------------

--- ---------- - ----------------------------------------------

-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -

--- -------- -
-------------
-------- ------------ -
  ------------------- ------------

  -------- ---------- -
    --------------------- ----------

    ------ -------------------------------- ------------------------------------- ------------
  -

  ---------------------- --
    ---- ---------
    ------ -------- -------- -
      ------ -------------------------------------- ----- ------- -- ---------------- -----
    -
  ----

  ------ ---------
--------------------

------------------ - -
  ----- ---------------------------------------
--
------------------ - ---------

结论

如果你的项目依赖Babel,升级到Babel 7.0.0是一个明智的选择。新版本的Babel在代码转换和运行时的速度方面都得到了显著的改善。虽然升级过程需要一些调整和学习,但是使用自动化工具可以让转换变得容易和快捷。

参考文献:

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/66fc712644713626016e2777


猜你喜欢

  • Custom Elements 如何实现文件上传

    前言 随着互联网的发展,文件上传已经成为了 Web 应用中的常见行为之一。文件上传功能是很多网站的重要组成部分,比如在线编辑器、云存储等等。 在现代化 Web 应用中,自定义组件(Custom Ele...

    18 天前
  • ECMAScript 2017 中的 Array.prototype.includes() 方法如何使用

    ECMAScript 2017 中的 Array.prototype.includes() 方法如何使用? 在 ECMAScript 2016,JavaScript 规范中,引入了 Array.pro...

    18 天前
  • ES6 中的 Array.from 和 Array.of 让数组变化不停

    前言 数组是前端开发中非常重要的数据类型之一,它可以帮助我们存储数据,并进行各种操作。ES6 中提供了 Array.from 和 Array.of 方法,让数组的使用变得更加方便和灵活。

    18 天前
  • 如何解决 Promise 中的回调地狱?

    在异步编程过程中,回调地狱是很常见的问题。回调地狱指的是嵌套过多的回调函数,导致代码难以阅读和维护。Promise 是解决回调地狱的一种方式,但是 Promise 本质上仍然是异步回调,所以如何解决 ...

    18 天前
  • Hapi.js 中的用户权限管理和 RBAC 实现

    在现代 Web 应用程序中,用户权限管理及角色-基于访问控制 (RBAC) 是非常重要的一部分。Hapi.js 框架提供了内置的支持,使得我们能够方便地实现用户权限管理和 RBAC。

    18 天前
  • Angular 中可复用的组件设计与实现

    前言 Angular 是一个现代化的前端框架,它的设计与实现非常灵活,可以让我们轻松地将功能进行模块化,组件化。在本篇文章中,我们将介绍如何在 Angular 中设计和实现可复用的组件。

    18 天前
  • Kubernetes 中容器亲和性 (Affinity) 使用详解

    在 Kubernetes 中,容器亲和性是一项非常重要的功能。它可以帮助我们在集群中更好地管理容器,提高资源利用率,保证应用的高可用性等等。下面,本文将详细介绍 Kubernetes 中的容器亲和性,...

    18 天前
  • GraphQL 与 CQRS 结合的实践经验

    什么是 GraphQL? GraphQL 是一种查询语言和运行时环境,用于构建 API。它由 Facebook 在 2012 年开发,并在 2015 年开源。GraphQL 的一个重要优点是它允许客户...

    18 天前
  • Chai 和 Jasmine 的区别及使用场景对比

    前言 在 JavaScript 前端开发中,单元测试是不可或缺的一环。而在单元测试中,常常需要使用断言库来判断某些条件是否成立,从而判断测试结果是否正确。Chai 和 Jasmine 都是流行的 Ja...

    18 天前
  • 如何优化 CSS Grid 布局的性能

    CSS Grid 布局是一种强大的布局机制,可以轻松地实现复杂的布局设计。然而,过度使用 Grid 布局可能会导致性能问题。本文将介绍如何优化 Grid 布局的性能。

    18 天前
  • 对于 Jest 测试文件扩展名的探究及建议

    作为一名专业的前端开发者,了解 Jest 测试框架是必不可少的。而对于 Jest 测试文件的扩展名,我们可能会有一些疑问,在本文中,我们将探究 Jest 测试文件的扩展名以及如何为我们的项目选择合适的...

    18 天前
  • Cypress 错误解决:如何解决 Cypress 端到端浏览器测试案例失败

    Cypress 是一款非常强大的端到端浏览器测试工具,但是在使用的过程中难免会遇到一些测试案例失败的情况。本文将为大家介绍一些常见的 Cypress 失败情况及其解决方案。

    18 天前
  • 使用 Less Attribute Hack 应对 IE8

    在前端开发中,我们经常要处理兼容性问题,特别是对于老旧的 IE 浏览器。针对 IE8的问题,这篇文章将介绍一种解决方案——使用 Less Attribute Hack。

    18 天前
  • Mongoose Schema 的虚拟属性详解及用法

    在使用 Mongoose 进行 MongoDB 数据库操作的过程中,Schema 是我们必须了解的一个重要概念,它用来定义数据模型的结构和属性。而虚拟属性(Virtual)是 Schema 中一个非常...

    18 天前
  • 如何在 Hapi 中使用 Socket.io 实现实时通信

    Socket.io 是一个基于 Node.js 的实时通信框架,可方便地实现服务端和客户端之间的实时通信。而 Hapi 是一个基于 Node.js 的 Web 开发框架,它提供了一些有用的工具和插件,...

    18 天前
  • 在 ES9 中使用 obj.constructor() 函数创建对象

    在 JavaScript 中,我们通常使用对象字面量或构造函数来创建对象。但在 ES9 中,我们可以使用 obj.constructor() 函数来创建对象。这种方式可以让我们更加灵活地创建对象,并且...

    18 天前
  • 如何使用 Mocha 测试 AngularJS 应用?

    Mocha 是一个流行的 JavaScript 测试框架,可针对多种应用程序和库进行测试。在前端开发领域中,测试是至关重要的一环,特别是对于 AngularJS 应用程序。

    18 天前
  • Next.js 处理外部请求数据的方法和技巧

    Next.js 是一种流行的 React 框架,可以帮助我们构建可靠、可扩展的 Web 应用程序。与许多其他的 React 框架不同,Next.js 还提供了一些处理外部请求数据的方法和技巧,让应用程...

    18 天前
  • 用 Fastify 实现自定义错误处理器

    Fastify 是一个基于 Node.js 的快速和低开销 Web 框架。它专为构建高效和可伸缩的服务而设计,提供了很多强大的功能,如内置的插件系统、路由、中间件等等。

    18 天前
  • Kubernetes 中的 Job 和 CronJob 使用详解

    Kubernetes 是一个用于管理容器化应用程序的开源平台,它有助于在大规模分布式系统中轻松部署、管理和扩展应用。在 Kubernetes 中,Job 和 CronJob 是用于执行批处理任务和定期...

    18 天前

相关推荐

    暂无文章