如何通过Apps Script动态合并多个JS文件到Web应用

你可以通过将需要加载的JS文件名存入数组，循环批量处理的方式实现动态添加，后续新增文件只需往数组里追加名称即可，不用改动核心逻辑，能有效保持代码简洁易维护。

修改后的完整代码 #

const getNewPageContent = (clientType, clientName, clientId, userId, userFirstName, userLastName) => {
  if (clientType === "AP") {
    // 用数组管理所有需要加载的独立JS文件名，新增文件直接在这里添加
    const jsFiles = ["ap_dashboard_js", "approval_tracker_js"];
    // 统一封装要传递的参数对象，避免重复定义
    const templateParams = {
      clientType,
      clientName,
      clientId,
      userFirstName,
      userLastName
    };

    const apDashboardHtmlWindow = HtmlService.createTemplateFromFile("ap_dashboard");
    
    // 循环处理每个JS文件，批量完成模板创建、参数传递、内容生成和挂载
    jsFiles.forEach(fileName => {
      const jsTemplate = HtmlService.createTemplateFromFile(fileName);
      jsTemplate.obj = templateParams;
      apDashboardHtmlWindow[fileName] = jsTemplate.evaluate().getContent();
    });

    return apDashboardHtmlWindow.evaluate()
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
      .getContent();
  }
  return ContentService.createTextOutput('ok');
}

关键改动说明 #

• 用数组jsFiles集中管理所有需要加载的JS文件，后续新增文件只需往数组里加名字，无需修改循环逻辑。
• 抽离templateParams统一封装参数，减少重复代码，后续参数变动只需修改这一处。
• 通过forEach循环批量执行「创建模板→传递参数→生成内容→挂载到主模板」的流程，避免重复编写相同逻辑。
• 移除了原代码中多余的});（原代码该括号无对应开头，会引发语法错误）。

主模板（ap_dashboard.html）的使用示例 #

在你的ap_dashboard.html中，只需通过对应变量名引入各JS内容即可：

<script>
  <?= ap_dashboard_js ?>
</script>
<script>
  <?= approval_tracker_js ?>
</script>

这样每个独立JS文件都能获取到obj参数，同时文件拆分清晰，主文件不会过度冗长。

内容的提问来源于stack exchange，提问作者onit