npm 包 @rollup/plugin-buble 使用教程

什么是 @rollup/plugin-buble

@rollup/plugin-buble 是 Rollup.js 的一个插件,它使用 buble 转换 ES6+ 代码为 ES5,从而使得这些代码可以在更多的浏览器中运行。

安装 @rollup/plugin-buble

如果你还没有安装 Rollup.js,需要先全局安装:

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

然后在项目中安装 @rollup/plugin-buble:

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

使用 @rollup/plugin-buble

在使用 @rollup/plugin-buble 之前,需要在 Rollup.js 的配置文件中设置该插件。下面以一个简单的配置文件为例:

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

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

在上面的配置文件中,我们使用了 @rollup/plugin-babel 将 ES6+ 代码转换为 ES5。进一步优化,我们还可以使用 @rollup/plugin-buble 来代替 @rollup/plugin-babel,修改后的配置文件如下:

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

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

@rollup/plugin-buble 的选项

@rollup/plugin-buble 提供了一些选项,可以通过在配置文件中传入对象来配置这些选项。下面列举了一些常用的选项:

exclude

类型:string | RegExp

默认值:undefined

忽略指定的文件或文件夹,不进行转换。

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

objectAssign

类型:string

默认值:undefined

指定 Object.assign() 的 polyfill 方式。如果不设置该选项,@rollup/plugin-buble 会自动根据 target 环境选择合适的 polyfill。

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

transforms

类型:Object

默认值:undefined

自定义 buble 的转换规则。

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

更多选项详见官方文档:https://github.com/rollup/plugins/tree/master/packages/buble

总结

经过本文的介绍,我们学习了 @rollup/plugin-buble 的安装和使用。使用该插件可以让我们更加轻松地将 ES6+ 代码转换为 ES5,从而兼容更多的浏览器。同时,我们还介绍了一些常用的选项,可以根据需要进行配置。希望本文能够对大家有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/a-rollup-plugin-buble


猜你喜欢

  • npm包web3-providers-ws使用教程

    简介 web3-providers-ws是一个npm包,是以太坊Web3.js库的一个WebSocket和IPC传输的提供者。本文将详细介绍web3-providers-ws的安装和使用方法,以及如何...

    5 年前
  • npm 包 web3-providers-http 使用教程

    简介 web3-providers-http 是 Ethereum 的一个 JavaScript 客户端 API,它可以与以太坊区块链进行交互。它提供了一组连接到以太坊节点的 HTTP 支持方法,以便...

    5 年前
  • npm 包 redux-beacon 使用教程

    1. 前言 redux-beacon 是一个用于 Google Analytics 和 Mixpanel 等第三方分析工具及错误日志的 Redux 中间件。这个包提供了一种简单的方法来将事件数据发送到...

    5 年前
  • npm 包 react-rte 使用教程

    前言 在 React 中,富文本编辑器是一个经常会被用到的组件。react-rte 是一个 React - Rich Text Editor 的缩写,是一个方便易用的富文本编辑器的 npm 包,可以帮...

    5 年前
  • npm 包 react-router-named-routes 使用教程

    前言 在前端开发中,路由管理是非常重要的一项技能。当我们使用 React 框架进行开发时,react-router 是非常受欢迎的一款路由管理库。然而,在使用 react-router 进行开发时,我...

    5 年前
  • npm 包 react-ellipsis-text 使用教程

    简介 react-ellipsis-text 是一个 React 组件,它可以显示截断文本的省略号,以及通过鼠标悬浮展示完整文本的功能。这个组件可以避免文本内容过长而影响页面效果的问题,使页面更加美观...

    5 年前
  • npm 包 @types/storejs 使用教程

    前言 @types/storejs 是一个类型定义文件,用于为 Store.js 提供类型支持。如果你正在使用 Store.js,那么 @types/storejs 可以让你的开发变得更加高效和优雅。

    5 年前
  • npm 包 @types/sanitize-html 使用教程

    在前端开发中,经常需要对用户输入的数据进行过滤、格式化等操作,防止 XSS 攻击等安全问题。sanitize-html 是一个实用的 JavaScript 库,可以帮助开发者对 HTML 进行安全的处...

    5 年前
  • npm 包 @types/redux 使用教程

    在前端开发中,Redux 是一种广泛使用的状态管理库,它可以帮助开发者更好地管理应用程序的状态。同时,由于 TypeScript 在前端领域的普及和应用,使用 TypeScript 开发 Redux ...

    5 年前
  • npm 包 @types/highlight.js 使用教程

    在前端开发中,经常会遇到需要使用代码高亮的场景。这时候,我们就可以使用 highlight.js 这个工具。而在 TypeScript 项目中使用 highlight.js,需要安装官方提供的类型定义...

    5 年前
  • npm 包 @redux-beacon/google-analytics 使用教程

    前言 @redux-beacon/google-analytics 是一个能够将 Redux Action 与 Google Analytics 进行集成的 npm 包,可以很方便的帮助开发者去追踪用...

    5 年前
  • npm 包 @kirby-web3/ethereum-react 使用教程

    @kirby-web3/ethereum-react 是一款 npm 包,用于开发基于以太坊的 React 应用程序。该包提供了许多以太坊相关的功能,例如 web3 对象、以太坊账户管理以及智能合约交...

    5 年前
  • npm 包 @joincivil/utils 使用教程

    介绍 @joincivil/utils 是 Civil 前端团队创建的一个 npm 包,用于存放常见的工具函数和常量,如日期处理、常量定义等等。本文将详细介绍如何安装、引入、使用该包的一些常见函数以及...

    5 年前
  • npm 包 @joincivil/typescript-types 使用教程

    简介 在前端开发中,使用 TypeScript 可以大大提高代码的可维护性和可读性。但是在使用 TypeScript 进行开发时,很多时候需要定义各种类型,而这个过程比较繁琐和容易出错。

    5 年前
  • npm 包 @joincivil/sdk 使用教程

    前言 在前端开发过程中,经常需要使用第三方库来增加代码的复用性和降低开发成本。而 npm 是目前最流行的用于分享和发现 JavaScript 代码的平台,它提供了一个便捷的方式来管理和使用第三方库。

    5 年前
  • npm 包 @joincivil/newsroom-signup 使用教程

    介绍 在前端开发中,经常需要与第三方 API 进行交互,其中需要进行一些鉴权验证。@joincivil/newsroom-signup 是一个 npm 包,可以帮助开发人员完成特定场景下的鉴权验证,使...

    5 年前
  • npm 包 @joincivil/newsroom-manager 使用教程

    介绍 npm 包 @joincivil/newsroom-manager 是一个基于 web3.js 的前端组件,用于管理 Civil Newsroom,可以实现在应用内部直接创建、管理、更新和删除 ...

    5 年前
  • npm 包 @joincivil/kirby 使用教程

    概述 @joincivil/kirby 是一个基于 React 的组件库,旨在为开发者提供一系列统一的 UI 组件。它的组件风格简约、美观,帮助开发者快速构建符合现代设计风格的前端项目。

    5 年前
  • npm 包 @joincivil/ethapi 使用教程

    @joincivil/ethapi 是一个基于 Node.js 的 npm 包,用于与以太坊区块链互动。它提供了一套简明的 API,方便前端开发者进行对区块链的访问和交互。

    5 年前
  • npm 包 @joincivil/elements 使用教程

    前言:@joincivil/elements 是一个基于 React 的 UI 组件库,有助于简化前端开发,并带有许多自定义的样式和组件。 安装 可以通过 npm 工具进行安装,使用命令: --- -...

    5 年前

相关推荐

    暂无文章