npm 包 rollup-plugin-gas 使用教程

前言

在 Google Apps Script 开发中,我们经常需要将多个 JavaScript 文件打包成一个文件以便于在 GAS 平台中加载,并且还需要在代码中插入代码执行计时等信息,以便于追踪代码执行流程。rollup-plugin-gas 就是一个可以帮助我们实现这些需求的 rollup 插件。

本文将介绍如何使用 rollup-plugin-gas,希望本文内容可以对前端开发者和 Google Apps Script 开发者有所帮助。

安装

使用 npm 安装 rollup-plugin-gas:

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

使用

快速开始

在项目根目录中创建一个 rollup.config.js 文件,并添加以下内容:

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

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

然后在命令行中执行 rollup 命令:

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

以上配置会把 main.js 和它的依赖文件打包成一个新的 JS 文件 bundle.js,并在代码中插入计时和日志代码。

参数说明

rollup-plugin-gas 的参数如下:

  • author:脚本作者邮件地址
  • functionName:脚本暴露的函数名称
  • projectId:Google 云项目 ID

可以在 rollup.config.js 中设置这些参数。使用时,只需要传入上述参数的值即可,如下所示:

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

Rollup 配置

上面我们已经创建了一个 rollup.config.js 文件并添加了 rollup-plugin-gas 插件,下面将一些关于 Rollup 的配置项也提供给大家参考。假设我们有以下的样式目录结构:

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

下面是一个简单的 rollup.config.js 配置:

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

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

该配置使用了 Rollup 的 Tree-shake 和 ES6 模块的优化打包特性,同时也忽略了 lodash 的打包。更多关于 Rollup 的配置请参考官方文档。

示例代码

在我们的示例中,我们创建三个 JS 文件:

myModule.js

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

main.js

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

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

rollup.config.js

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

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

使用以上代码及配置执行 rollup 命令,会在项目根目录生成一个名为 bundle.js 的文件,并自动插入计时和日志代码。

总结

本文介绍了 npm 包 rollup-plugin-gas 的使用方法,并提供了示例代码。通过该插件,我们可以在 Google Apps Script 平台上打包和优化 JavaScript 代码,同时也可以自定义代码执行计时和日志等信息,方便后期调试。希望读者可以学到有用的内容,分享给更多的人。

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


猜你喜欢

  • npm 包 @typopro/web-linux-libertine 使用教程

    介绍 @typopro/web-linux-libertine 是一个 npm 包,提供了一种高质量的英文字体 Linux Libertine,为前端开发者提供了更好的字体渲染效果。

    3 年前
  • npm 包 @typopro/web-mukta 使用教程

    在前端开发中,字体往往是被忽略的一个重要部分,但是一个好的字体能够让网站或应用界面更加美观,同时也能提高用户体验。在选择字体时需要考虑字体的可读性、适用性以及文件大小等因素。

    3 年前
  • npm 包 @typopro/web-overpass 使用教程

    在前端开发中,我们经常需要选择合适的字体应用到我们的网页中,来提高界面整体的美观度以及用户的阅读体验。而 @typopro/web-overpass 就是一个优秀的字体选择。

    3 年前
  • npm 包 @typopro/web-saira 使用教程

    在前端开发中,选择合适的字体对于提升用户体验、增加辨识度有着不可忽视的作用。今天,我们将介绍一款来自 @typopro 的 npm 包 @typopro/web-saira,该字体包含了丰富的语言支持...

    3 年前
  • `npm` 包 `jwt-socket.io` 的使用教程

    前言 在前端开发中我们经常会涉及到用户认证和授权等问题。通常我们会在前端使用 JWT(JSON Web Token) 来完成用户认证和授权的工作。而对于实时通信,我们经常使用 Socket.io 来实...

    3 年前
  • npm 包 nativescript-vkontakte 使用教程

    随着移动互联网的快速发展,社交化已成为一个很重要的应用需求,而 VKontakte(简称 VK)作为俄罗斯最大的社交网络平台,也逐渐成为国内开发者关注的对象。为了方便前端开发者与 VK 之间的交互,V...

    3 年前
  • npm 包 react-tableau-report 使用教程

    在前端开发中,我们经常需要使用数据可视化工具来展示数据信息,而 Tableau 是业内公认的一个强大的数据可视化工具。React 是现今前端开发(尤其是单页面应用)非常流行的框架,而使用 react-...

    3 年前
  • npm 包 candy.js 使用教程

    前言 随着 JavaScript 技术的不断发展,前端开发日益复杂,很多开发者不再只局限于基本的 HTML、CSS、JavaScript 等技术,而更多地使用各种框架、库、工具等进行开发。

    3 年前
  • npm 包 promise-wechat-oauth 使用教程

    随着移动互联网的发展,微信已经成为了人们生活中不可或缺的一部分。在前端开发中,我们经常需要与微信接口进行交互。为了解决这个问题,开发者开发了一个 npm 包 去封装微信的授权功能,这个 npm 包叫做...

    3 年前
  • npm 包 Thing-It-Device-BlueID 的使用教程

    简介 Thing-It-Device-BlueID 是一个用于前端开发的 npm 包,它可以实现通过蓝牙进行远程访问的物联网设备的控制。本篇文章将带领读者详细了解如何使用 Thing-It-Devic...

    3 年前
  • npm 包 @rocketloop/angular2-modal 使用教程

    背景 @rocketloop/angular2-modal 是一个针对 Angular 2+ 的模态框框架,可以帮助前端工程师高效地制作各种模态框,包括 alert、confirm、prompt 等等...

    3 年前
  • npm 包 dom-pools 使用教程

    随着前端技术的不断发展,网页中越来越多的动态效果需要通过 JavaScript 来实现。而与此同时,对于网页中的 DOM 操作也变得越来越复杂和频繁。在这样的环境下,如何管理 DOM 节点成为了一个重...

    3 年前
  • npm 包 sunmi-runtime 使用教程

    前言 在日常前端开发中,我们经常会使用各种 npm 包来帮助我们完成更复杂的工作,如异步请求、UI 组件、构建工具等。今天我们要介绍的是一款名为 sunmi-runtime 的 npm 包,在前端开发...

    3 年前
  • npm 包 nodebb-plugin-pubgstats-vrk 使用教程

    介绍 nodebb-plugin-pubgstats-vrk 是一个 NodeBB 平台的插件,提供了丰富的功能,可以集成并展示玩家的电子竞技游戏“绝地求生(PUBG)”的统计数据。

    3 年前
  • npm 包 @src-works/npm-ts-gulp 使用教程

    在前端开发中,经常需要使用不同的工具和技术来简化代码编写,优化开发流程。而在这些工具和技术中,npm 包是不可或缺的一部分。npm(Node Package Manager)是 Node.js 的包管...

    3 年前
  • npm 包 paragon-ts-jest 使用教程

    概述 paragon-ts-jest 是一款针对 TypeScript 项目编写的 Jest 测试框架的 npm 包。该包提供了一种简单易用的方式来编写和运行 TypeScript 测试用例。

    3 年前
  • npm 包 nuorder-carousel 使用教程

    介绍 nuorder-carousel 是一款基于 Vue.js 的轮播组件,提供了丰富的配置和扩展能力。使用 npm 包可以大大简化项目中引入和使用 nuorder-carousel 的流程,让开发...

    3 年前
  • npm包static-angular使用教程

    简介 npm是Node.js的包管理器,是前端开发中常用的工具之一。它可以在项目中创建、安装和管理各种模块和库,使项目开发变得更加高效。 static-angular是一个基于AngularJS的np...

    3 年前
  • npm 包 @require-x/python 使用教程

    介绍 在前端开发过程中,我们通常都会遇到需要使用后端语言处理数据的情况,比如 Python,而 npm 包 @require-x/python 就提供了一种在前端直接运行 Python 代码的方案。

    3 年前
  • npm 包 @jameskraus/react-loading-overlay 使用教程

    在现代 Web 开发中,很多网站或应用程序都需要展示高质量、动态的加载状态。在这种情况下,@jameskraus/react-loading-overlay 是一个很好用的 npm 包,可以帮助你轻松...

    3 年前

相关推荐

    暂无文章