typescript - 从另一个文件导入自定义函数时如何修复“ReferenceError: procglobal is not defined”？

Question

我正在开发一个简单的模板项目，用于使用 TypeScript、CLASP 和 Webpack + gas-webpack-plugin 在 Google Apps 脚本中创建新的 Web 应用程序。

一切正常，直到我尝试引用我在另一个文件中编写的函数，在这种情况下，updateTable在我的表单处理程序中；Webpack 编译没有问题，但是 GAS 抱怨procglobal没有定义。

我很确定这与我的 Webpack 配置有关，但我一点也不知道从哪里开始寻找。

表格/code.ts

import { updateTable } from "../table/code";

export function processForm(formObject: FormSubmission) {
  const formData: string[] = formObject[""];
  updateTable({
    rowNumber: formData[0],
    firstName: formData[1],
    lastName: formData[2],
    handle: formData[3],
  });
}

表/code.ts

export function updateTable(row: TableRow) {
  const scriptProperties = PropertiesService.getScriptProperties();
  const table = JSON.parse(scriptProperties.getProperty("tableData"));
  const newTable = { ...table, ...row };
  scriptProperties.setProperty("tableData", JSON.stringify(newTable));
}

代码.ts

import "./app/home/do-get";
import "./app/form/code";
import "./app/modal/code";
import "./app/table/code";

webpack.config.js

const GasPlugin = require("gas-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  context: __dirname,
  entry: "./src/code.ts",
  module: {
    rules: [
      {
        test: /(\.ts)$/,
        loader: "ts-loader",
      },
    ],
  },
  resolve: {
    extensions: [".ts"],
  },
  output: {
    path: __dirname,
    filename: "build/Code.js",
  },
  plugins: [
    new GasPlugin({
      autoGlobalExportsFiles: ["**/*.ts"],
    }),
    new CopyPlugin({
      patterns: [
        { from: "**/*.html", to: "build", context: "src" },
        { from: "appsscript.json", to: "build" },
      ],
    }),
  ],
};

webpack 生成的代码

var global = this;
function processForm() {}
function getForm() {}
function doGet() {}
function appTitle() {}
function updateTable() {}
function getTable() {}
function getTableData() {}
(() => {
  var e = {
      963: (e, t, r) => {
        "use strict";
        Object.defineProperty(t, "__esModule", { value: !0 }),
          (t.processForm = t.getForm = void 0),
          r(661),
          (t.getForm = function () {
            return HtmlService.createHtmlOutputFromFile(
              "app/form/index"
            ).getContent();
          }),
          (t.processForm = procglobal.processForm = t.processForm), // <-- error on procglobal, only appears when processForm includes an imported function
          (global.getForm = t.getForm),
          essForm;
      },
      237: (e, t) => {
        "use strict";
        Object.defineProperty(t, "__esModule", { value: !0 }),
          (t.doGet = t.appTitle = void 0),
          (t.appTitle = "Google Apps Script template"),
          (t.doGet = function () {
            return HtmlService.createTemplateFromFile("index")
              .evaluate()
              .setTitle(t.appTitle);
          }),
          (global.doGet = t.doGet),
          (global.appTitle = t.appTitle);
      },
      199: () => {},
      661: function (e, t) {
        "use strict";
        var r =
          (this && this.__assign) ||
          function () {
            return (
              (r =
                Object.assign ||
                function (e) {
                  for (var t, r = 1, a = arguments.length; r < a; r++)
                    for (var o in (t = arguments[r]))
                      Object.prototype.hasOwnProperty.call(t, o) &&
                        (e[o] = t[o]);
                  return e;
                }),
              r.apply(this, arguments)
            );
          };
        function a() {
          var e = PropertiesService.getScriptProperties(),
            t = JSON.parse(e.getProperty("tableData"));
          return console.log(t), t;
        }
        Object.defineProperty(t, "__esModule", { value: !0 }),
          (t.updateTable = t.getTableData = t.getTable = void 0),
          (t.getTable = function () {
            var e = HtmlService.createTemplateFromFile("app/table/index");
            return (e.tableData = a()), e.evaluate().getContent();
          }),
          (t.getTableData = a),
          (t.updateTable = function (e) {
            var t = PropertiesService.getScriptProperties(),
              a = JSON.parse(t.getProperty("tableData")),
              o = r(r({}, a), e);
            t.setProperty("tableData", JSON.stringify(o));
          }),
          (global.updateTable = t.updateTable),
          (global.getTable = t.getTable),
          (global.getTableData = t.getTableData);
      },
    },
    t = {};
  function r(a) {
    var o = t[a];
    if (void 0 !== o) return o.exports;
    var l = (t[a] = { exports: {} });
    return e[a].call(l.exports, l, l.exports, r), l.exports;
  }
  (() => {
    "use strict";
    r(237), r(963), r(199), r(661);
  })();
})();

---

如果我从中删除该updateTable功能form/code.ts，则procglobal消失...

表格/code.ts：

import { updateTable } from "../table/code";

export function getForm() {
  return HtmlService.createHtmlOutputFromFile("app/form/index").getContent();
}

export function processForm(formObject: FormSubmission) {
  const formData: string[] = formObject[""];
  console.log({
    rowNumber: formData[0],
    firstName: formData[1],
    lastName: formData[2],
    handle: formData[3],
  });
}

新的 webpack 生成代码：

var global = this;
function processForm() {}
function getForm() {}
function doGet() {}
function appTitle() {}
function updateTable() {}
function getTable() {}
function getTableData() {}
(() => {
  var e = {
      963: (e, t) => {
        "use strict";
        Object.defineProperty(t, "__esModule", { value: !0 }),
          (t.processForm = t.getForm = void 0),
          (t.getForm = function () {
            return HtmlService.createHtmlOutputFromFile(
              "app/form/index"
            ).getContent();
          }),
          (t.processForm = function (e) { // <-- no procglobal
            var t = e[""];
            console.log({
              rowNumber: t[0],
              firstName: t[1],
              lastName: t[2],
              handle: t[3],
            });
          }),
          (global.processForm = t.processForm),
          (global.getForm = t.getForm);
      },
      237: (e, t) => {
        "use strict";
        Object.defineProperty(t, "__esModule", { value: !0 }),
          (t.doGet = t.appTitle = void 0),
          (t.appTitle = "Google Apps Script template"),
          (t.doGet = function () {
            return HtmlService.createTemplateFromFile("index")
              .evaluate()
              .setTitle(t.appTitle);
          }),
          (global.doGet = t.doGet),
          (global.appTitle = t.appTitle);
      },
      199: () => {},
      661: function (e, t) {
        "use strict";
        var r =
          (this && this.__assign) ||
          function () {
            return (
              (r =
                Object.assign ||
                function (e) {
                  for (var t, r = 1, a = arguments.length; r < a; r++)
                    for (var o in (t = arguments[r]))
                      Object.prototype.hasOwnProperty.call(t, o) &&
                        (e[o] = t[o]);
                  return e;
                }),
              r.apply(this, arguments)
            );
          };
        function a() {
          var e = PropertiesService.getScriptProperties(),
            t = JSON.parse(e.getProperty("tableData"));
          return console.log(t), t;
        }
        Object.defineProperty(t, "__esModule", { value: !0 }),
          (t.updateTable = t.getTableData = t.getTable = void 0),
          (t.getTable = function () {
            var e = HtmlService.createTemplateFromFile("app/table/index");
            return (e.tableData = a()), e.evaluate().getContent();
          }),
          (t.getTableData = a),
          (t.updateTable = function (e) {
            var t = PropertiesService.getScriptProperties(),
              a = JSON.parse(t.getProperty("tableData")),
              o = r(r({}, a), e);
            t.setProperty("tableData", JSON.stringify(o));
          }),
          (global.updateTable = t.updateTable),
          (global.getTable = t.getTable),
          (global.getTableData = t.getTableData);
      },
    },
    t = {};
  function r(a) {
    var o = t[a];
    if (void 0 !== o) return o.exports;
    var l = (t[a] = { exports: {} });
    return e[a].call(l.exports, l, l.exports, r), l.exports;
  }
  (() => {
    "use strict";
    r(237), r(963), r(199), r(661);
  })();
})();