Google Apps Scriptでファイルを分けて開発する環境について

Google Apps Scriptでファイルを分割して管理したい

自動化の一環としてGmailのメールコンテンツをAPI連携したい時があるかと思います
こういった場合は、Google Apps Scriptのお世話になる訳ですが、私がGASで開発する際には、ローカルでコードを書いて、claspでuploadしています
そうすれば、コードのgit管理も出来ますので

このGoogle Apps Scriptって.clasp.jsonにファイルのupload順は設定できるのですが、実行時に別のファイルの読み込みエラーになることが多くて、歯痒い思いをしてきました

だからといって1ファイルに全てを書き込むのは関心事の分離から避けたい状況な訳でして...

どう対応したか

複数ファイルに分けて書いて、npmでbundleしています
bundleと同時にJavaScriptへのトランスパイルも行なっています
トランスパイルはclaspでも出来ますが、実行時に生じたエラーの対応を考えると、同じファイルがローカルにある方が良いと考え今の方式を採用しました

ディレクトリ構成や設定内容は下をご確認ください
(実装内容はsourceディレクトリにファイルを分けて置いています。この記事では割愛しています)

• .clasp.jsonで"rootDir":"./dist"を指定してbundleとトランパイルしたファイルを出力しています。またappsscript.jsonもこちらに置いています
• esbuildも試しましたが、古めのTypeScriptには対応していないこと、TypeScriptのバージョンを上げると、GASの実行エンジンが入口となる関数を見つけてくれなかったことから諦めました
• source内には14ファイル、1000物理行ほどのファイルですので、webpackでも問題ありませんでした。今は色んなツールがあるのとすんなり動いたのでswcを使っています。clasp pushが一番時間がかかるので、どのツールでも大差はないと思います

ディレクトリ構成

tree.sh

dist/
source/
.clasp.json
package-lock.json
package.json
tsconfig.json
webpack.config.js

webpack.config.js

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

module.exports = {
  mode: "development",
  devtool: false,
  context: __dirname,
  entry: "./source/index.ts",
  output: {
    path: path.join(__dirname, "dist"),
    filename: "bundle.ts",
  },
  resolve: {
    extensions: [".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: "ts-loader",
      },
    ],
  },
  plugins: [new GasPlugin()],
}
const loaders= {swc: 'swc-loader'};
const loaderOptions= {
    swc: {
      sync: true,
      jsc: {
        parser: {
          syntax: "typescript",
          tsx : true
        }
      }
    }
  };

tsconfig.json

{
    "compilerOptions": {
      "target": "ES5",
      "module": "ESNext",
      "allowJs": false,
      "outDir": "./dist",
      "skipLibCheck": true
    }
}

package.json

  "scripts": {
    "build": "webpack --progress --env loader=swc",
    "push": "npm run build && clasp push",
    "build:esbuild": "esbuild source/index.ts --bundle --outfile=dist/bundle.ts",
    "build:webpack": "webpack"
  }

なお、当方backend側の人間でして、npmに詳しいわけではありません
何か変な設定をしていたら、やさしく教えて頂けると嬉しく思います

終わりに

同じ思いをしていている方の何らかの参考になると嬉しく思います