GoogleAppsScript
TypeScript
webpack

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

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

gas-typescript-webpack

特徴

  • TypeScript を使った型あり言語での開発
  • Webpack を使って最終的に一つのファイルに bundle する
  • node google apps scriptを使った Apps Script server へのファイルのプッシュ
  • 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. node google apps-scriptの設定

2.1 インストール

Google Apps Script をローカルで開発するために node-google-apps-script をインストールをします。

$ npm install -g node-google-apps-script

2.1 Google Drive Credentials の設定

この記事を参考に、Google Drive Credentialsの設定をしておきます

2.3 プロジェクトの初期設定

ソースコードを管理したい Apps Script を Google ドライブで新規作成または開きます。

URLの<file_id> の部分をコピーします。

https://script.google.com/d/<file_id>/edit

その後、以下のコマンドを実行します。

$ gapps init -s build <fileId>

開発する

webpackでビルドする

$ npm build

ビルドしたファイルをアップロードする

$ npm run upload

継続的に開発する

$ npm run watch

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

参考