１．目的
client のJavasScriptのObjectが大きくなり過ぎたのでmodule化する

２．既存のcodeからの変更箇所
(1) 元のjsの< script> のtypeを変更
(2) 元のjsから対象のfunctionをmoduleのfileに移動
(3) exportとimportを追加

３．ファイルレイアウト

—main.html
|— pages
|    |— sub.html
|
|— js
    |—sub.js
    |—sub_module.js

４．main.html内に./pages/sub.htmlを組み込む

＜iframe src="pages/sub.html" id="Page.sub"＞＜/iframe＞

５．sub.htmlに記述する< script> のtype

元のsub.jsのtypeを”text/javascript”から”module”に変更する
追加するsub_module.jsを”module”にする

・変更前

＜script type="text/javascript" src="../js/sub.js"＞＜/script＞

・変更後

＜script type="module" src="../js/sub_module.js"＞＜/script＞
＜script type="module" src="../js/sub.js"＞＜/script＞

６．functionをmoduleのfileに移動
元：sub.js
先：sub_module.js

７．functionにexportを追加
・sub_module.js

export  function api() {
 console.log("This api is called.");
}

８．importをsrcの先頭に追加
・sub.js

import { api } from '../js/sub_module.js';

api() // This api is called.

9. async で定義していたfunctionはどうなるか？

問題なく動作する

・export側 ( sub_module.js )

export  async function api_search() {
 console.log("This api_search is called.");
}

・import側 ( sub.js )

import { api_search } from '../js/sub_module.js';
api_search(); //This api_search is called.