GASを書くのにflowを使いたかったので rollupとbabelつかってみています。(実験的)

主要な設定をメモしときます。
細かいことは他の良質な記事を参照ください。

以下のコマンドでGASのコードを更新できるようにしてます。

yarn deploy

必要な気がするコマンドのインストール

npm install -g yarn rollup gapps

デフォルトは src だけど srcは普段書きたいコードを起きたいので、gaaps.config.jsonのpathを変更してます。fileIdは各々違います。

gapps.config.json

{
  "path": "dist",
  "fileId": "xxxxxxxxxxxxx"
}

設定

デプロイスクリプトの設定

package.json

{
  "scripts": {
    "upload": "gapps upload",
    "build": "rollup -c",
    "deploy": "yarn build && yarn upload"
  }
}

babelってnpmをまとめて一つのファイルにするのにrollupしてみています。
rollup-plugin-gasの説明全然かいてなかったので適当につかっています。

rollup.config.js

import babel from 'rollup-plugin-babel'
import gas from 'rollup-plugin-gas'
import nodeResolve from 'rollup-plugin-node-resolve'

export default {
  input: 'src/index.js',
  output: {
    file: "dist/index.js",
    format: 'es',
  },
  plugins: [
    nodeResolve({ jsnext: true }), // node_modulesにあるのもくっつけてくれる
    babel({
      exclude: 'node_modules/**'
    }),
    gas(),
  ],
}

flowの設定はお好みで。
modules: falseはいれておかないとbabelがimportを処理してしまう。

.babelrc

{
  "presets": [
    "flow",
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

使うモジュールのインストール

yarn add -D babel-core babel-preset-env babel-preset-flow rollup-plugin-babel rollup-plugin-gas rollup-plugin-node-resolve

サンプルコード

src/index.js

global.helloWorld = () => {
  Logger.log("Hello, World")
};

ビルド

ビルドするとdist/index.jsが生成されます。
こんな感じ

var global=this;function helloWorld() {
}

global.helloWorld = function () {
  Logger.log(result);
};

importもつかえますが、使えるモジュールは限られるかなと思います。

確認用にis-gasってパッケージを作って公開してみてます。

npm is-gas

参考程度のメモ

Promiseを使う

GASだと同期的に動くのでPromiseを返しそうなメソッドも全部同期的に動作する。
nodeやbrowserでも動くようにコードを書こうとするとPromiseを返すwrapperを用意して挙げた方が良いが、setTimeoutがないのでPromiseの実装が動かない。

以下で適当に対処

global.setTimeout = setTimeout(func, time) {
  Utilities.sleep(time)
  func();
}

rollupのプラグインでやると使えるライブラリ増えそう (TODO)
とりあえす、es6-promiseでは動いた。

TODO

一から確認してない。次のプロジェクト作る時に確認する
flow用の型定義がみつけられてないので、なかったらかくかもしれない。
- つくりはじめた https://www.npmjs.com/package/flow-interfaces-google-apps-script

感想

npmからパッケージ持ってきても使えないものが多いのでさほどメリットがなさそう。
flowを使いたいならコメントスタイルでがんばるほうが無難な可能性がたかい。

参考文献