如何在 G Suite Add-on 的服務器和客戶端組件中重復使用單個 JavaScript？

Question

我有一個 JavaScript 文件，它是一個生成的解析器（我們稱之為MyParser ），我在 Google Forms 的附加組件中使用它。

它需要在客戶端的Sidebar.html中使用，我將它與HtmlService.createHtmlOutputFromFile('MyParser.js').getContent(); ，這意味着據我了解它必須是.html文件。 然后它必須在服務器端使用，我在文件MyParser.js.gs中有它。

使用我當前的解決方案，它在我的文件結構中重復：

Code.gs
MyParser.js.gs
MyParser.js.html
Sidebar.html

有沒有辦法在沒有兩個文件的情況下完成這項工作？ 編輯：據我了解，庫僅適用於服務器端。

如果沒有，是否有任何提示可以使兩個文件的更新更加健壯（目前是手動復制/粘貼）？

編輯：根據最佳實踐，必須將 JavaScript 包裝在.html文件內的<script>標記內：

請注意，包含的文件包含<style>和<script>標簽，因為它們是 HTML 片段，而不是 pure.css 或 .js 文件。

所以看起來只有一個文件並不容易。

Answer 1

據我所知，沒有辦法重用單個文件並尊重 Google 的最佳實踐。

根據@tehhowch 的建議，我的解決方案是使用@google/clasp並進行本地開發。

為了構建解析器（在另一個 GitHub 項目中），我使用npm-run-script 。 所以，我只是在build腳本中附加了一個&& bash makeHTML.sh 。

里面makeHTML.sh我包內置MyParser.js在一個文件中<script>標記有：

#!/usr/bin/env bash
{ echo "<script>"; cat MyParser.js; echo "</script>"; } > MyParser.js.html

由於我使用的是bash因此它不是真正的node.js解決方案（除非安裝了 bash，否則不會運行）。 如果有人知道一種更好的方法來完成 100% 節點的包裝並且不需要安裝一大堆其他模塊，請隨時編輯答案。

Answer 2

由於您的插件只有幾個文件，您可以使用ScriptApp.getResource(filename).asDataString()來獲取 a.gs 文件的內容並將其添加到包含在<script>標記中的側邊欄HttpOutput object 中。

代碼.gs

function showSidebar(){
  const htmlOutput = HtmlService.createHtmlOutput('<h1>My Sidebar content</h1>');
  .append(`<script>${ScriptApp.getResource('JavaScript').getAsDataString()}</script>`);
  SpreadsheetApp.showSidebar(htmlOutput,'My Sidebar');
}

JavaScript.gs
為簡單起見，此文件應僅包含可重用（服務器端 + 客戶端）JavaScript

function myFunction(){
  console.log('My function ran successfully');
}

上面過於簡單的代碼示例可能適用於更復雜的項目，並且會讓您不必使用 CLASP。

與 .gs 和 .html 文件的情況相反，到目前為止，我無法使ScriptApp.getResource(filename).asDataString()工作以從托管在 Google Apps 腳本庫上的 .gs 文件中提取可重用的 JavaScript。 無論如何，仍然可以遠離 CLASP，一種選擇可能是使用高級服務 Google Apps 腳本 API，另一種可能是托管共享 JavaScript 並使用 Z02A3A347710FBCC2A5EDFetch 服務從 Google Drive 或其他主機導入。

有關的

• 是否可以從另一個腳本讀取 Google Apps 腳本的內容
• HTML 和 JavaScript 來自另一台服務器？
• 服務器端 HTML 表單驗證？