0

非常に細かくマニアックな(と思われる)ところを質問します。

元ネタは次の記事です。

HTMLファイルだけでCDNでBabelをリンクしてES2015/2016/2017を動かす - Qiita
https://qiita.com/standard-software/items/f6c18fa6017fbb218cce

CDN形式で、babel-coreのver 5.8.34 なら動いているのですが
Babel6を使おうとして
次のようにリンクすると

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

リンク先記事の、べき乗演算子2 ** 8というところと、
async/awaitで、動かなくなってしまいます。
chromeなどでは動くのですが、IE11で誤動作していまいます。

それ以外は全て動作するのですが、この2つの構文は対応せず変換されないようなのです。変換されなくてもchromeは動くのですが、IEは動きません。これを動作させるには、何かCDNが足りなかったりするのでしょうか?

ご存知の方おられましたら、教えてください。

CDN形式ではなく
コマンドラインでコンパイルする方法は次の環境で
べき乗演算子も、async/await どちらも、普通にIE11で動いています。

package.json 抜粋

"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1"

.babelrc

{
  "presets": [
    ["./node_modules/babel-preset-env", {
      "targets": {
        "IE": "11"
      }
    }]
  ]
}

よろしくお願いします。

1 件の回答 1

1

(https://babeljs.io/docs/setup/#installation にもある通りstandaloneは限られた用途で使用可能ですが推奨されないのは理解されていると思った上で書きます)

babel 6 ではコアと各トランスパイル定義が分離されているためstandaloneを使用する場合も同様に使用するプリセットをなんらかの方法で指定してやる必要があります。(例えば質問でcliでトランスパイルしている場合は babel-preset-env というプリセットを指定されていますね。)

そのままではenvは使えませんが、es2015stage-1のようなプリセットは以下のように指定できます。(多分これが単純)

<script type="text/babel" data-presets="es2015,stage-2">

試しに以下のコードはIE11での動作確認をしました。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>
    <title>Example Document</title>
    <script type="text/babel" data-presets="es2015,stage-2">
        console.log(2**8)

        const wait = async () => {
            console.log('wait')
            await sleep(1000)
            console.log('waited')
        }

        const sleep = (timeout) => {
            return new Promise((sucess) => {
                setTimeout(sucess, timeout);
            })
        }

        wait()
    </script>
</head>

<body>

</body>

</html>

その他、コードから指定することも出来るようですがここでは省略します。詳しくはReadmeをご覧ください。(npmで任意のプリセット、プラグインも追加できるようですが…… https://babeljs.io/docs/setup/#installation )

1
  • すごい!!!すごすぎる!! 動きましたーー!!!ありがとうございます。 data-presets の方法が全くわかっていませんでした。 「standaloneは限られた用途で使用可能」 というのも、なんとなくくらいしかわかっていません。 ありがとうございます。data-presetのことを更に学んでおきます! 最高の回答です。 少し厚かましいところなのですが、 「そのままではenvは使えません」 のところについて情報源ありましたら教えてください。 CDNでenvでも動かしてみたいです。(無理なら無理、でも問題ないのですが。)
    – s.yamamoto
    Commented 2018年2月27日 1:27

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。