Google Apps ScriptでES Module(Babel)を使うときのTips

  • 3
    いいね
  • 0
    コメント

ここ1年ほどで Browserify + Babel 、 Webpack + Babel の組み合わせで ES2015を使った Google Apps Script の開発を紹介するブログなんかをちらほら見かけるようになりました。

「Babel6を使うとGASをアップロードするときにエラーが発生するのでBabel5を使いました」というような記事もあったので何がいけないのか調べてみました。結論から言うとBabel6も利用できます。

Babel6での問題

ES Module(import/export)で書いてBabel6で変換した場合、変換後のスクリプトをスクリプトエディターにコピペしたりnode-google-apps-scriptでアップロードしたときにエラーになる場合があります。

エラーの原因

ローカルでES2015で以下のようにコーディングします。

ES2015で書いたJS
export default {}

それをBabel6で変換した結果(必要箇所のみ抜粋)は次のようになります。

babel6で変換したっ結果
exports.default = {};

この変換後のdefaultというキーワードが問題で、GASアップロード時のバリデーションに引っかかってエラーになってしまいます。
Babel5までは以下のように変換されていたのでバリデーションでエラーにならずに済んでいました。

export["default"] = {};

エラーの解決方法

defaultというキーワードが問題なので、Babel6で変換した結果が以下のようになればエラーは起きないはずです。

export["default"] = {};

ちょうどいいことに、Babelには次のようなプラグインがあり、これらを使うとまさにexport.defaultexport["default"]に置き換えてくれます。

これらのプラグインは以下のコマンドでインストールできます。

npm install --save-dev transform-es3-member-expression-literals transform-es3-property-literals

.babelrcに次のように書けば今まで通りのコマンドで利用できます。

.babelrc
{
  "presets": ["es2015"],
  "plugins": [
    "transform-es3-member-expression-literals",
    "transform-es3-property-literals"
  ]
}

babel-gas-presetの紹介

複数のプラグインのインストールと.babelrcへの記述が面倒なのでこれらのプラグインをまとめた babel-preset-gas という babel-preset を作成しました。
GAS向けのプラグインをまとめて導入するのに便利だと思います。(まとめてと言っても今は2つしかありませんが :sweat_smile: )

インストールは以下のコマンドで完了です。

npm install --save-dev babel-preset-gas

.babelrcに次のように書けば上記と同じように利用できます。記述が減って少しスッキリしましたね。

.babelrc
{
  "presets": ["es2015", "gas"]
}

Babelを使ってGASを開発している方は使ってみてください。

es3ify-webpack-plugin とかもで同じことが実現ことできるはず。