webpack+ES2015でGoogle Apps Scriptローカル開発するためのテンプレート作った

gapps を使って Google Apps Script をローカルで開発するための方法については 以前 Qiita に書いた し、それにより ES2015 や TypeScript で書いて手元でビルド、みたいなことはみんなやるようになったんだけど
webpack を使った構成が探してもあまり見つからなかったので自分用に作った。

特徴

ES2015 で書いて webpack でビルド、ESLint で構文チェック

業務でも使っているスタックで GAS が書けるようになった。 import/export でファイルを適切に分割できてうれしい。
最終的なビルド結果を GAS で使える用にエクスポートする方法がわからなかったんだけど、gas-webpack-plugin というのを使わせていただいた。

// webpack.config.babel.js
import GasPlugin from 'gas-webpack-plugin';

export default {
...
  plugins: [
    new GasPlugin(),
  ]
}

と書き、スクリプト側は

global.hello = function () {
}

とすれば良い。

.env に定義した環境変数を読み込めるように

GAS で何かしたいときって Slack などの外部サービスと連携することが多く、トークンなどの情報をコード中に埋め込むとスクリプトが公開しづらくなるかと思って .env から読み込めるようにした。

watch モードつき

ファイルの変更監視して再ビルド・アップロードをできるように watch コマンドも作っておいた。
https://github.com/mikeal/watch というのがあるらしい。npm scripts だけでいけるんですね。