1. eielh

    Posted

    eielh
Changes in title
+rollup + babel でGoogle Apps Script
Changes in tags
Changes in body
Source | HTML | Preview

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

TODO

  • flow用の型定義がみつけられてないので、なかったらかくかもしれない。

参考文献