42025


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

元ネタは次の記事です。

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

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

[code]

    <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>
    
[/code]

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

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

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

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

package.json 抜粋

[code]

    "babel-cli": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1"
    
[/code]

.babelrc

[code]

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

よろしくお願いします。


CC BY-SA 3.0
2018-02-26T11:02:43.073
42021
2018-09-28T22:33:10.293
2018-09-28T22:33:10.293
19110
21047
question
javascript babeljs
CDN の babel6 による、べき乗演算子とasync/await について


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

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

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

[code]

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

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

[code]

    <!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>
    
[/code]

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


CC BY-SA 3.0
2018-02-26T17:07:34.673
42025
2018-02-26T17:07:34.673
2376
42021
answer