ParcelのBabelでAsync関数を変換せずに使う設定

---

バベル消滅 (角川文庫)

posted with amazlet at 18.09.06

KADOKAWA / 角川書店 (2015-10-24)
売り上げランキング: 228,520

Amazon.co.jpで詳細を見る

前回記事で、ParselでAsync関数が普通の関数に変換されてしまって困っていましたが回避する方法が分かりました（実は困らなくてよかったのですが、それは後ほど）。

単にワタシが知らないだけで、普通にBabelの設定でした。 Parcelはまったく無関係。 まあ誰でも最初はビギナーですし。 いくつになってもお勉強。

前回の記事：

takamints.hatenablog.jp

目次

最新ブラウザをターゲットに指定するだけ

以下の .babelrc を使えばAsync関数は無変換でそのまま使用されますね。

.babelrc

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": ["last 1 Chrome version"]
            }
        }]
    ]
}

しかし、これって「ターゲットブラウザはChromeの最新版」ってだけの設定ですよね。 Chromeの最新版が Async/Await に対応しているからってことなのでしょう。

Async/Await対応ブラウザ全部乗せ

他のブラウザ、FirefoxやEdgeでもちゃんと動作するのか不安な場合は、以下のようにAsync/Await対応のブラウザを全部並べておけばよいはずです。 そうすることで各ブラウザ間の差も吸収してくれるはず（今やほとんど存在しないかもしれませんが）。 ちなみに、ここにIEを入れるとAsync/Awaitに非対応ですからPromiseを使った処理に変換されます。

.babelrc

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": [
                    "last 1 Chrome version",
                    "last 1 Firefox version",
                    "last 1 Edge version",
                    "last 1 Safari version",
                    "last 1 Opera version"
                ]
            }
        }]
    ]
}

Babel関係のモジュールも不要になります

前回の記事で必要と書いていた babel関係の2つのモジュールも、上の設定では一切不要になりますのでアンインストールして大丈夫。

$ npm uninstall --save-dev babel-runtime babel-plugin-transform-runtime

Polyfillされても困る必要はなかったのだ

なんでAsync関数が普通の関数に変換されて困っていたかというと、関数が非同期であるかどうかを、関数のコンストラクタで判定しようとしていたからなのですが、そもそもそれが間違いでした。

関数オブジェクトのコンストラクタがAsyncFunction か Function かは同期/非同期に無関係ではありませんが、正しい判定はできません。 Asyncでない普通の関数がPromiseを返してもよいのですから。

関数が非同期かどうかの判定は、その関数を実際に呼び出して「戻り値がPromiseであるかどうかで判断すべき」なんですね。

つまり、今さらですけど、コンストラクタで困る必要はありませんでした。 大騒ぎして失礼こきました。

参考サイト

• Disable automatic babel compilation · Issue #1207 · parcel-bundler/parcel · GitHub