使用 Google Sheets 作为数据库，在 Google Apps Script 上创建一个完整的 Web 应用程序

谷歌的 Apps Script 对所有 JavaScript 开发者来说都值得关注。Apps
Script 非常适合自动化操作。您可以直接访问谷歌的众多服务，例如 Google Sheets、Gmail、Google Docs、Google Calendar 等。点击此处查看一些 Google Apps Script 入门教程。

只要发挥一点想象力，你就可以使用 Google Apps Script 创建非常精彩的应用和插件。

Apps Script 的第一个限制是它使用较旧版本的 JavaScript，不支持 ES6 及其特性。不过这不算什么大问题，我们可以使用 Babel 进行交叉编译，生成兼容的版本。第二个限制是它没有打包/模块管理机制，无法直接在 Apps Script 环境中使用 npm 模块。

幸好，有一个名为clasp的命令行工具。clasp 工具可以轻松上传您的 Apps Script 代码。

因此，在本项目的第一部分，我们将尝试在 Apps Script 中使用 ES6 和 npm 模块。我们将使用 Webpack 和 Babel 将源代码打包成一个 bundle。然后，我们将使用 clasp 工具上传该 bundle。

第一部分的代码请见此处：
https://github.com/gsmart-in/AppsCurryStep2

使用 Webpack 创建打包文件

最有趣的部分应该是这里的 webpack 配置：
https://github.com/gsmart-in/AppsCurryStep2/blob/master/webpack.gas.js

在服务器文件夹中，您可以看到两个文件：api.js 和 lib.js。

api.js 文件直接暴露给 Apps Script。该文件只能包含 Apps Script 兼容的代码，并直接上传。该文件仅包含全局函数，因为 Apps Script 只能识别全局函数。

lib.js 是我们的打包入口点。我们可以在 lib.js 及其任何依赖项中使用 ES6 和 npm 模块。总而言之，调用结构如下：

api.js -> lib.js -> 您的自定义模块。

回到我们的webpack 配置

output: 
  {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'var',
    library: 'AppLib'
  }

库目标设置为“var”，库名称为“AppLib”，因此可以在 api.js 中像这样访问库（lib.js）中导出的标识符：

function doGet() 
{
    var output = 'Today is '+AppLib.getTodaysDateLongForm()+"\n\n";

    return ContentService.createTextOutput(output);
}

在 webpack 配置的 modules 部分，我们有 babel 交叉编译的规则。

此外，我们使用 Copy 插件将 api.js 文件复制到输出文件夹（然后我们使用 clasp 工具将生成的代码从输出文件夹上传到 Apps Script）。

使用 npm 模块

lib.js中我们可以使用 ES6 或任何你想要的高级特性。它还可以包含其他模块。

import * as moment from 'moment';
import _ from 'lodash';

function getTodaysDateLongForm()
{
    return moment().format('LLLL');
}

要试用此应用，请克隆项目并按照自述文件中的说明进行操作。

请阅读此处的详细文章：在 Google Apps Script 中使用 ES6 和 npm 模块。

为 Apps Script 项目创建丰富的用户界面

让我们来开发一个“请求管理”应用。该应用将是一个单页应用。用户可以创建新的请求（例如笔记本电脑、手机等），管理员可以查看、批准或拒绝这些请求。在后端，应用会将请求添加到 Google 表格中。因此，Google 表格充当数据库。

完整的项目地址是：
https://github.com/gsmart-in/AppsCurryApp

点击此处查看应用快速演示：

代码分为两部分：“客户端”和“服务器”。客户端文件夹包含 Vue.js、SCSS 和 index.html 模板。我们将所有这些组合在一起，创建最终的 index.html 文件包，该文件包将被上传。

服务器文件夹包含在 Apps Script 中运行的代码。ES6 代码会被编译成 Apps Script 兼容代码并上传。

服务器文件夹还包含服务器端代码的单元测试。

您必须将所有 CSS 和 Javascript 打包并内联到一个 HTML 文件中！

Google Apps Script 的一个局限性在于它只有一个功能，即显示页面。它不像普通网站那样可以快速链接 JavaScript/CSS 文件。因此，您必须将所有 JS/CSS 打包并内联。

因此，我们使用 webpack 插件 HtmlWebpackInlineSourcePlugin 将生成的 CSS 和 JS 内联到 index.html 中。

以下是 webpack 配置：

const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');


module.exports = merge(common, {
    mode: 'production',
  output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, '../deploy/gas')
    },
    plugins: [
     new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery'
     }),
     new HtmlWebpackPlugin({
          template: 'client/src/index.html',
        inlineSource: '.(js|css)$'
     }),
     new HtmlWebpackInlineSourcePlugin()
   ]
});

结论

这个项目的目的是探索如何突破 Apps Script 的局限性，使其成为构建完整 Web 应用的平台。虽然目前这个平台还无法构建生产级应用，甚至连用户规模有限的应用都难以胜任，但它确实展现了此类平台的潜力。试想一下，您可以创建应用并发布，而无需担心扩展性问题。想象一下，一个内置用户访问管理功能的平台。或许有一天，这个例子能够帮助我们创建一个更完善、更具扩展性的通用应用平台。

应用视频演示

查看应用的完整演示（克隆项目并创建实例）

阅读更多

• 在 Google Apps Script 中使用 ES6 和 npm 模块
• 使用 Google Apps Script 构建单页应用程序（使用 Vue 和 Bootstrap）