Babel 6 升级到 7,你需要了解这些

Babel 是一个 JavaScript 编译器,可以将新版本的 JavaScript 代码转换成向后兼容的代码,使得开发者可以在老版本的浏览器上运行新版 JavaScript 代码。

最近,Babel 发布了 7.0 版本,相对于之前的 6.x 版本有很多变化和更新。如果你已经在使用 Babel 6,并打算升级到 7,请务必了解以下内容。

安装和使用

Babel 7 不再支持单独的 babel-cli 和 babel-core,而是将所有 Babel 相关的库都打包在一个单独的 npm 包中,即 @babel/cli 和 @babel/core。所以,第一步需要卸载旧版本并安装新版本:

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

接着,在 package.json 中配置 @babel/preset-env,让 Babel 可以根据目标环境自动转换代码。

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

在执行命令行操作时,需要使用新的 syntax,例如:

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

或者在 package.json 中添加 scripts 配置:

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

然后,可以使用 npm run build 命令运行程序。

插件

Babel 7 中,插件的命名和 package.json 的配置都发生了变化。

插件命名

Babel 6 插件的命名格式为 babel-plugin-NAME,例如 babel-plugin-transform-runtime。而 Babel 7 插件的命名格式为 @babel/plugin-NAME,例如 @babel/plugin-transform-runtime

package.json 配置

Babel 6 的 package.json 配置如下:

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

Babel 7 的 package.json 配置如下:

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

preset

Babel 7 中将启用 preset-env 代替 es2015、es2016、es2017、latest 等 preset。preset-env 会根据目标环境的配置,自动转换代码。

在 Babel 6 中,我们可能会使用这样的配置:

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

而在 Babel 7 中,我们应该改成:

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

preset-env 会根据目标环境的配置,自动转换代码。因此,我们无需手动指定 es2015 或 stage-2 之类的 preset。

Polyfill

在 Babel 7 中,使用 @babel/polyfill 代替 babel-polyfill。

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

然后在代码中导入即可。

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

总结

Babel 6 升级到 7,并不是一件很艰难的事情,只需注意其中变动的方面,然后相应地修改代码即可。

升级到 Babel 7,可以让我们使用更强大的 preset-env,更优雅的插件命名方式,更简便的 Polyfill 引入方式等等。

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


猜你喜欢

  • 了解从 WordPress 迁移到 Headless CMS 的最佳实践

    随着现代化 Web 开发的不断演进,开发团队越来越依赖由 Content Management System(CMS)提供的管理与编辑基础。很多团队都长期使用 WordPress,但是这个系统并不总是...

    1 年前
  • 学习使用 Babel 转码 ES6 的 8 个建议!

    在前端领域,ES6 已经成为了大家热议的话题。由于浏览器对 ES6 的支持程度不同,所以一些新的特性还不能得到广泛应用。为了让更多的开发者能够享受到 ES6 带来的便利,我们需要使用到 Babel 来...

    1 年前
  • CSS Flexbox 实战:如何实现多行省略号排版

    在前端开发中,排版一直是一个重要的问题。尤其是在移动端,屏幕空间有限,如何在不占用过多空间的情况下,让内容显示更加清晰和美观,是一项需要思考的任务。在本文中,我们将探讨如何运用 CSS 的 Flexb...

    1 年前
  • 使用 PM2 在生产环境中部署 Node.js 应用

    前言 对于一个前端工程师来说,我们很少接触直接操作服务器的工作。但是,在 Node.js 技术愈发成熟的今天,Node.js 不再仅仅是一个用来调试和测试的工具,越来越多的企业开始将其作为后端开发的利...

    1 年前
  • 如何解决 Redis 出现连接错误的问题?

    问题背景 在使用 Redis 进行开发的时候,难免会出现连接错误的问题,比如连接超时,连接被拒绝等情况。这些问题不仅影响了程序的正常运行,还会影响开发者的开发效率。

    1 年前
  • 订阅粒度控制 ——RxJS takeUntil 操作符的应用

    在前端开发中,我们经常会使用到异步操作来处理各种数据流,比如 HTTP 请求、Websocket 消息等。这些异步数据流一般都是以 Observable 的形式返回给我们。

    1 年前
  • React 中 key 的作用及其使用方法详解

    在 React 中,key 是一个重要的属性,它可以提高性能,避免出现一些问题。本文将详细介绍 key 的作用和使用方法,希望能对 React 的开发者有所帮助。 作用 在 React 中,key 用...

    1 年前
  • Next.js 中如何使用 Redux?

    在前端开发中,Redux 是一个流行的状态管理库。它提供了可预测、可维护、易扩展的状态管理方式,让我们更容易地管理应用的状态。在 Next.js 中使用 Redux,可以帮助我们更好地组织代码和数据,...

    1 年前
  • 使用 Node.js 实现基于 WebSocket 的即时通讯应用

    随着移动互联网的发展,即时通讯已经成为人们日常生活中必不可少的一部分。目前市场上已经有众多即时通讯应用,如微信、QQ、WhatsApp 等。但是,对于有一定开发基础的开发者来说,使用自己开发的即时通讯...

    1 年前
  • AngularJS 与 Socket.io 的完美结合

    在前端开发中,AngularJS 和 Socket.io 是非常常用的工具。AngularJS 为我们提供了一种快速开发动态 web 应用程序的方式,而 Socket.io 则是实现了实时数据传输的解...

    1 年前
  • 解决响应式设计中 CSS Float 带来的问题

    在响应式设计中,为了让网页在不同设备上都能正确展示,我们通常会使用 CSS Float 来布局元素。然而,使用 Float 带来一系列问题,如浮动元素会脱离文档流导致高度塌陷、周围元素位置错乱等。

    1 年前
  • Fastify Web 框架教程:如何创建一个快速的 API

    Fastify 是一个快速、开箱即用的 Web 框架。它是由 Node.js 社区驱动的,使用了一些最新的技术,因此它非常适合构建高性能的 Web 应用程序和 API。

    1 年前
  • 使用 Promise 实现异步流程控制

    前端开发中,异步操作非常常见,例如 AJAX 请求、定时器、读写本地存储等等,这些操作都是需要一定时间才能完成的。在异步操作中,我们通常需要依赖回调函数来处理异步结果。

    1 年前
  • Webpack 遇到 SyntaxError: Unexpected token 时的解决方法

    在使用 Webpack 进行前端开发时,有时会遇到 SyntaxError: Unexpected token 这类错误信息。这种错误通常是由于代码中出现了不符合语法规则的字符或符号,而导致了解析失败...

    1 年前
  • Docker 容器集成 OpenCV 的方法和步骤

    前言 OpenCV (Open Source Computer Vision Library) 是计算机视觉领域最受欢迎的开源软件库之一,拥有强大的计算机视觉和图像处理功能,其在图像处理、模式识别、机...

    1 年前
  • AngularJS SPA 应用实现页面滚动固定表头的方法

    在 AngularJS 的单页应用程序中,实现滚动固定表头的方法可以提供一个更加美观和易用的用户界面。在这篇文章中,我们将介绍如何使用 AngularJS 来实现这个功能。

    1 年前
  • Sequelize ORM:精通 Node.js

    在 Node.js 的开发过程中,一个很重要的组成部分就是数据库的操作。针对数据库操作,使用 ORM 框架是很常见的选择。而 Sequelize ORM 是目前比较流行的框架之一。

    1 年前
  • 在 SASS 中使用 @import 和 @extend 的区别和注意事项

    SASS 是一种流行的 CSS 预处理器,它提供了许多功能和语言特性,以帮助我们更快速、更高效地编写 CSS。在 SASS 中,有两个常用的指令,它们分别是 @import 和 @extend。

    1 年前
  • 使用 Hapi 框架构建 RESTful API 的实例教程

    RESTful API 已经成为现代 Web 应用程序开发的标准方式,因为它可以提供高效的通信和可靠的数据传输。本文将介绍如何使用 Hapi 框架来构建 RESTful API。

    1 年前
  • 解读 ES8 中弱写保护修饰符

    随着前端技术的不断发展,JavaScript 也在愈发完善自身的同时,也不断加强对代码的中保护措施。在 ES8 中,新增了一个弱写保护修饰符,本文将会对其进行详细解读,并为读者提供学习和指导意义。

    1 年前

相关推荐

    暂无文章