やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

Babel on CDN で ES Module を使ってみたが動かなかった

使用中のブラウザはES Moduleが未実装だった。

成果物

github.com

要点

  • ES6の ES Module でモジュール化(ブラウザ未実装のためできなかった)
  • BabelでES6(ES2015)のコードをトランスパイル
  • require.js, Babel, はCDNのURLを設定して入手する(要ネット接続)

コード

構成

  • index.html
  • main.js
  • sub.js

ファイル

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Babel + ES Module</title>
    <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>
    <script type="module" src="./main.js"></script>
</head>
<body></body>
</html>
  • <script type="module" src="./main.js"></script>type="module"がポイント
  • CDNのBabelではimport構文が動かない

main.js

document.addEventListener('DOMContentLoaded', function(){
    import {sub_method} from "./sub.js"
    sub_method();
}, false);

sub.js

export function sub_method() {
    alert('sub.js');
};

動かなかった原因

ES Moduleが未実装だから。

2018-04-21時点でRaspbian (jessie)では、Chromium 56 が最新。しかし、ESMが実装されるのは63以降らしい。(ネット上には60, 61との情報もあったので詳細不明)

いずれにせよ、今、私の環境では動作確認できない。別のOSなら動作確認できるのか?

開発環境

2018-04-21時点。