これは何？

ES Module で作成されているライブラリを利用するときに困ったのでメモ。
読み込みたいモジュールが DOMContentLoaded 後に使用したいものだったので、 Promise で合成している。ただ <script type="module"> を使えば十分だったかもしれない。

作成が必要なファイル一覧

ファイル名	説明
`main.gs`
`index.html`
`libLoader.js.html`	ES Module コードを動的に読み込むためのコード
`index.js.html`	EM Module を利用したいコード
`Lib_js.html`	読み込みたい MS Module コード

Codes

main.gs

'use strict';

function doGet() {
  return HtmlService
    .createTemplateFromFile('index')
    .evaluate();
}

/**
 * 
 * @param {string} filename
 * @returns {string} Html code
 */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

/**
 * 
 * @returns {string} javascript code
 */
function api_loadLibJs() {
  return HtmlService
    .createTemplateFromFile('Lib_js')
    .getRawContent();
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('libLoader.js'); ?>
    <?!= include('index.js'); ?>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

libLoader.js.html

<script>
const LibLoader = (() => {
  const DOMContentLoaded = new Promise((resolve, reject) => {
    const boot = () => {
      document.removeEventListener('DOMContentLoaded', boot);
      resolve();
    }
    document.addEventListener('DOMContentLoaded', boot);
  });
  const LibLoaded = new Promise((resolve, reject) => {
    google.script.run
      .withSuccessHandler(code => {
        const url = URL.createObjectURL(new Blob([code], {'type': 'text/javascript'}));
        import(url)
          .then(resolve)
          .catch(reject);
      })
      .withFailureHandler(reject)
      .api_loadLibJs();
  });
  return Promise.resolve()
    .then(() => DOMContentLoaded)
    .then(() => LibLoaded);
})();
</script>

index.js.html

<script type="module">;(()=>{
'use strict';

LibLoader
  .then((module) => {
    module.hello(document.getElementById('app'));
  })
  .catch(console.error);
})();</script>

Lib_js.html

//<script>
export const hello = (elm) => {
  elm.textContent = 'Hello, world!';
};
//</script>

参考