https://idea-hack.com/courses/lets-understand-the-tips-to-write-javascript-efficiently-such-as-organizing-the-timing-of-reading-javascript-dividing-files-and-generalizing-processing/lessons/how-to-import-files-es-module-and-data-that-import-export-is-used-in-javascript-in-html/
https://idea-hack.com/courses/lets-understand-the-tips-to-write-javascript-efficiently-such-as-organizing-the-timing-of-reading-javascript-dividing-files-and-generalizing-processing/lessons/how-to-import-files-es-module-and-data-that-import-export-is-used-in-javascript-in-html/

JavaScriptでimport/exportが使われた(ESモジュール)ファイルやデータをHTML内で読み込む方法

JavaScriptでimport/exportが使われた(ESモジュール)ファイルやデータをHTML内で読み込む

ESモジュールとして運用されている(import / exportが書かれているファイル)JavaScriptファイルをHTML内で読み込むには一手間必要です。

構文

構文意味
<script type=”module” src=”ファイル名”></script>ESモジュールを使ったJavaScriptの読みこみ
ESモジュールをHTML内で読み込む

モジュールを用いたJavaScriptファイルを読み込むには、scriptタグのtype属性でmoduleを指定します。

指定がないとimportやexportがエラーになります。

サンプルコード

外部ファイルを読み込む

HTML
<script type="module" src="index,js"></script>

インラインスクリプト

HTML
<script type="module">
	import {targetClass } from './targetClass.js';
	new targetClass();
</script>
インストラクター