ここ1年ほどで Browserify + Babel 、 Webpack + Babel の組み合わせで ES2015を使った Google Apps Script の開発を紹介するブログなんかをちらほら見かけるようになりました。
「Babel6を使うとGASをアップロードするときにエラーが発生するのでBabel5を使いました」というような記事もあったので何がいけないのか調べてみました。結論から言うとBabel6も利用できます。
Babel6での問題
ES Module(import/export)で書いてBabel6で変換した場合、変換後のスクリプトをスクリプトエディターにコピペしたりnode-google-apps-scriptでアップロードしたときにエラーになる場合があります。
エラーの原因
ローカルでES2015で以下のようにコーディングします。
export default {}
それをBabel6で変換した結果(必要箇所のみ抜粋)は次のようになります。
exports.default = {};
この変換後のdefaultというキーワードが問題で、GASアップロード時のバリデーションに引っかかってエラーになってしまいます。
Babel5までは以下のように変換されていたのでバリデーションでエラーにならずに済んでいました。
export["default"] = {};
エラーの解決方法
defaultというキーワードが問題なので、Babel6で変換した結果が以下のようになればエラーは起きないはずです。
export["default"] = {};
ちょうどいいことに、Babelには次のようなプラグインがあり、これらを使うとまさにexport.defaultをexport["default"]に置き換えてくれます。
これらのプラグインは以下のコマンドでインストールできます。
npm install --save-dev transform-es3-member-expression-literals transform-es3-property-literals
.babelrcに次のように書けば今まで通りのコマンドで利用できます。
{
"presets": ["es2015"],
"plugins": [
"transform-es3-member-expression-literals",
"transform-es3-property-literals"
]
}
babel-gas-presetの紹介
複数のプラグインのインストールと.babelrcへの記述が面倒なのでこれらのプラグインをまとめた babel-preset-gas という babel-preset を作成しました。
GAS向けのプラグインをまとめて導入するのに便利だと思います。(まとめてと言っても今は2つしかありませんが 
)
インストールは以下のコマンドで完了です。
npm install --save-dev babel-preset-gas
.babelrcに次のように書けば上記と同じように利用できます。記述が減って少しスッキリしましたね。
{
"presets": ["es2015", "gas"]
}
Babelを使ってGASを開発している方は使ってみてください。
es3ify-webpack-plugin とかもで同じことが実現ことできるはず。