JavaScriptデモ／ESM(ES Module)
素のJavaScript(ブラウザ用JavaScript)でModuleを使いたい場合は、ESM(ES Module)記法で記述する必要があるようです。
ただし、両方ともサーバー上にないとModuleはimportできないようです。
下記デモはコンソールに表示するだけです。
【test.html】
<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<script type="module">
import * as Hoge from "./script.js";
Hoge.Hello();
</script>
</html>
【script.js】
export var Hello = function () {
console.log("Hello World");
}
【test.html】(動的ローディング版)
※非同期処理に成っている事に注意。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<script>
import('./script.js').then(Hoge => {
Hoge.Hello();
});
</script>
<body>
</body>
</html>
参考
Visual Studio Codeでフロントエンド開発環境を構築する
Visual Studio CodeにLive Serverプラグインを導入することにより、「Live Server」ローカル･サーバーを実行できます、使用法は上記ページを参照。
IEや古いスマホでは、Moduleは使えないので「Babel、webpack」でES5コードでコンパイル(トランスパイル)しなければなりません、対処法は上記ページのクロス･ブラウザを参照して下さい。
(Moduleだけで無く)ES6コードで記述されている場合は、「Babel、webpack」でES5コードでコンパイル(トランスパイル)しなければなりません、プロを目指すなら、当然 必須になりますが、プロを目指さないなら必須では有りません。
蛇足ですが、上記のページに書かれているCSSのクロス･ブラウザ対応も、プロを目指すなら、当然 必須になりますが、プロを目指さないなら必須では有りません。
コメント
コメントを投稿