Edited at

rollup + babel でGoogle Apps Script

More than 1 year has passed since last update.

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を処理してしまう。

{

"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ってパッケージを作って公開してみてます。


参考程度のメモ


Promiseを使う

GASだと同期的に動くのでPromiseを返しそうなメソッドも全部同期的に動作する。

nodeやbrowserでも動くようにコードを書こうとするとPromiseを返すwrapperを用意して挙げた方が良いが、setTimeoutがないのでPromiseの実装が動かない。

以下で適当に対処

global.setTimeout = setTimeout(func, time) {

Utilities.sleep(time)
func();
}

rollupのプラグインでやると使えるライブラリ増えそう (TODO)

とりあえす、es6-promiseでは動いた。


TODO


感想

npmからパッケージ持ってきても使えないものが多いのでさほどメリットがなさそう。

flowを使いたいならコメントスタイルでがんばるほうが無難な可能性がたかい。


参考文献