Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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

ここ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 とかもで同じことが実現ことできるはず。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What are the problem?