使用中のブラウザはES Moduleが未実装だった。
成果物
要点
- 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
構文が動かない- ローカルでファイル結合処理すれば可
- Node.js + webpack な環境をつくればいいが面倒
- require.jsのように動的読込すれば可?
import
構文をrequire.js
で動かせるAMD形式にできないの?- Node.js, npmモジュールとしてなら存在する transform-es2015-modules-amd
- CDNっぽいがブラウザで使えるのか? babel-plugin-transform-es2015-modules-amd-simple index.min.js
- Node.js, npmモジュールとしてなら存在する transform-es2015-modules-amd
- ローカルでファイル結合処理すれば可
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なら動作確認できるのか?
開発環境
- Raspberry Pi 3 Model B
2018-04-21時点。