GoogleAppsScript
TypeScript
webpack
clasp

Google Apps ScriptをTypeScriptで書いてWebpackでbundleする

タイトルの通り。
Google Apps ScriptTypeScriptで書いてWebpackでbundleするexampleを書きました↓

gas-typescript-webpack

特徴

  • TypeScript を使った型あり言語での開発
  • Webpack を使って最終的に一つのファイルに bundle する
  • claspを使った Apps Script へのファイルのプッシュ
  • watch オプションつき

使い方

1. サンプルソース を clone する

gitからサンプルソースである gas-typescript-webpack をcloneします。

$ git clone https://github.com/naoki-sawada/gas-typescript-webpack.git

その後、以下のインストールを実行します

$ cd gas-typescript-webpack
$ npm install

2. clasp の設定

2.1 インストール

Google Apps Script をローカルで開発するために clasp をインストールをします。

$ npm i @google/clasp -g

2.2 Google アカウントでログインする

次のコマンドを実行して、Google アカウントの認証を行います。

$ clasp login

2.3 Apps Scirpt の作成

次のコマンドを実行して、新規に Apps Scirpt を作成します。

$ clasp create "My Script" --rootDir ./dist

開発する

webpackでビルドする

$ npm build

ビルドしたファイルをプッシュする

$ npm run push

継続的に開発する

$ npm run watch

watch オプションを使えば、srcフォルダ内のファイルの変更を自動で検知し、 buildpush を自動的に行います。

参考