npm 包 @chrisaguilar/babelrc 使用教程

在前端开发中，Babel 是一种广泛使用的 JavaScript 编译器，提供了强大的语法转换和代码转换能力，使开发者可以使用现代的语言功能编写 JavaScript 代码并将其编译为向后兼容版本的 JavaScript。在使用 Babel 时，一个重要的配置文件是 .babelrc，通过该配置文件可以指定 Babel 的插件和预设。本文将介绍 npm 包 @chrisaguilar/babelrc，为你带来更方便的使用方式。

安装和使用

首先，需要在项目中安装 @chrisaguilar/babelrc。

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

安装完成后，在项目的 .babelrc 文件中，使用 @chrisaguilar/babelrc 提供的 presets 和 plugins，示例如下。

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

因为 @chrisaguilar/babelrc 已经包含了常用的 Babel 插件和预设，所以在 .babelrc 中只需要指定 @chrisaguilar/babelrc 即可。同时，可以使用 useBuiltIns 指定 polyfill 的使用方式，使用 corejs 指定 polyfill 的版本，使用 debug 打印调试信息。

插件和预设

@chrisaguilar/babelrc 包含了以下插件和预设。

插件

  • @babel/plugin-proposal-class-properties
  • @babel/plugin-proposal-optional-chaining
  • @babel/plugin-syntax-dynamic-import
  • @babel/plugin-transform-runtime
  • babel-plugin-styled-components

预设

  • @babel/preset-env
  • @babel/preset-react
  • @babel/preset-typescript

其中，插件 @babel/plugin-proposal-class-properties 使得我们可以在类中使用属性初始化器，插件 @babel/plugin-proposal-optional-chaining 可以让我们用更简洁的语法来访问嵌套的属性，插件 @babel/plugin-syntax-dynamic-import 支持动态导入，插件 @babel/plugin-transform-runtime 使用了 Babel 的运行时转换，可在编译时自动引入需要的 polyfill。在 React 开发中，预设 @babel/preset-react 为我们提供了 JSX 的支持，在使用 TypeScript 时，预设 @babel/preset-typescript 则为我们提供了 TypeScript 的支持。

示例代码

属性初始化器

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

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

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

可选链操作符

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

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

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

动态导入

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

运行时转换

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

编译结果：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  ------ ----
-

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

通过使用 @chrisaguilar/babelrc，我们可以更便捷地配置 Babel，避免手动添加多个插件和预设。同时，使用了 @chrisaguilar/babelrc，我们也可以使用更加现代的 JavaScript 语法，让我们的代码更加简洁易读。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005587681e8991b448d5b50

阅读全文

猜你喜欢

  • npm包 @andriyf/node-odata 的使用教程

    在前端开发中，使用npm包是极为常见的操作，因为它可以方便地集成和维护各种开发工具和库。其中 @andriyf/node-odata 是一个支持 OData v2 和 v4 协议的 Node.js 库...

    2 年前
  • npm 包 @ozylog/graphql-errors 使用教程

    如果你常常使用 GraphQL，你应该知道错误处理是一个很重要的问题。在传统的 RESTful API 中，错误通常通过 HTTP 状态码进行传递，但是 GraphQL 通常只返回原始数据，这为错误处...

    2 年前
  • npm 包 cordova-plugin-tci-sdk 使用教程

    如果您正在开发使用 Apache Cordova 的移动应用程序，您可能会需要使用 tci-sdk，这是一个可以帮助您实现各种通信功能的工具。 在本文中，我们将深入介绍 npm 包 cordova-p...

    2 年前
  • npm 包 rb-meter 使用教程

    介绍 rb-meter是一个npm包，它可以帮助前端开发人员快速生成实时监测DOM节点的大小。rb-meter非常适合于那些需要检测DOM节点的大小或要生成自适应布局的开发人员。

    2 年前
  • npm 包 mongodb_access_interface_set 使用教程

    介绍 mongodb_access_interface_set 是一个 Node.js 的 npm 包，其提供了在 Node.js 中操作 MongoDB 数据库的接口，方便开发人员以更简单快捷的方式...

    2 年前
  • npm 包 web-tree-crawl 使用教程

    简介 web-tree-crawl 是一个 NPM 包，它能够帮助你快速地爬取一个网站的 DOM 树。这个包基于 Node.js 开发，并且提供了一些非常简单易用的功能来获取一个网站的 DOM 树。

    2 年前
  • npm 包 my-simple-button 使用教程

    在前端开发中，经常需要自定义按钮样式，为了方便开发人员，有很多第三方库可以使用。其中，一个非常好用的 npm 包就是 my-simple-button，它可以让你轻松创建和自定义样式的按钮。

    2 年前
  • npm 包 choiros-router 使用教程

    前言 前端开发中经常需要进行路由管理，相信大家都使用过 Vue 或 React 中的路由插件。不过如果想要自己手动实现一个轻量的路由控制器，我们可以使用 npm 包 choiros-router。

    2 年前
  • npm 包 sugo-scope 使用教程

    前言 sugo-scope 是一款 npm 包，它是一种 JavaScript 库，提供从 URL 获取数据的能力。 在这篇文章中，我们将详细介绍如何使用 sugo-scope，并提供示例代码，以便您...

    2 年前
  • npm 包 react-sg 使用教程

    前言 在前端开发中，我们常常需要编写样式表来美化页面。尽管现在有许多前端 UI 框架可以使用，但是还是有许多时间需要编写自定义样式。为了更加高效地编写样式表，我们可以使用一些辅助工具来完成这项工作。

    2 年前
  • NPM 包 ajenti-build 使用教程

    什么是 Ajenti-build Ajenti-build 是一个帮助我们快速构建 Web 应用程序的工具, 可以认为它是基于 Ajenti 仪表盘的构建工具。Ajenti 是一款基于 Python ...

    2 年前
  • npm 包 feathers-services-instagram-feed 使用教程

    简介 feathers-services-instagram-feed 是一个 npm 包，用于快速获取 Instagram 用户的最新帖子和最新的标记。这个 npm 包可以帮助前端开发人员实现 In...

    2 年前
  • npm 包 graphql-mongodb-resolver 使用教程

    前言 graphql-mongodb-resolver 是一个基于 Node.js 平台的 GraphQL 解析器与 MongoDB 数据库操作库。它提供了一套简单易用的 API，帮助开发者构建出基于...

    2 年前
  • npm 包 flub78-nodejs-tutorial 使用教程

    前言 Node.js 是一门基于 JavaScript 的服务端编程语言。它有着非常丰富的模块和库，使得我们可以很方便地编写出高效的服务器端应用程序。其中，npm（Node.js 包管理器）则是 No...

    2 年前
  • npm 包 wikimedia-service-builder 使用教程

    在现代的前端开发中，使用 npm 包已经成为了必不可少的一部分。而其中最为著名、最为强大的 npm 包之一就是 wikimedia-service-builder。

    2 年前
  • npm 包 aslk 使用教程

    引言 npm 是 Node.js 的包管理器，它允许我们轻松地管理和分享代码。而 aslk 是一个前端开发中非常有用的 npm 包，它提供了一些能够提高开发效率的功能。

    2 年前
  • npm 包 generator-weather-react 使用教程

    在前端开发中，使用现成的工具可以提高效率。npm 包是其中一种非常有用的工具，使用它们可以节省大量时间和精力。 本文将介绍一款名为 generator-weather-react 的 npm 包的使用...

    2 年前
  • NPM 包 Relevant-animals 使用教程

    在前端开发中，我们经常需要对数据进行分类或者筛选，而使用有意义的词语来进行分类是非常有助于理解和后续处理的。relevant-animals 就是一个非常有趣且有意义的 NPM 包，它会根据给定的字符...

    2 年前
  • npm 包 webchart-library 使用教程

    Webchart-library 是一款基于 D3.js 开发的数据可视化图表库，可以帮助前端开发者快速构建各种交互性的数据可视化图表。本教程将为大家介绍如何使用 npm 包 webchart-lib...

    2 年前
  • npm 包 h5p.js 使用教程

    什么是 h5p.js H5P 是一个开源的互动内容创作和发布平台，可以创作出各种互动内容（如课程交互，游戏，测试题等），并通过分享链接来实现在线展示。h5p.js 是 H5P 平台的 JavaScri...

    2 年前

相关推荐

    暂无文章