mdn web docs や SAMURAI ENGINEER Blog をいくら読んでもピンと来なかったのですが、Qiita の記事を試してみたらうまく動かせました。
参考サイト
JavaScriptでのimport/export方法 | Qiita
https://qiita.com/koeri3/items/314ac7b9b73fc8c80a2d
前提
記事の中にもありましたが、ES2015(ES6)とNode.js(CommonJS)では書き方が異なります。
ウェブ制作においては、読み込んだスクリプトをモジュールとして扱うので、ES2015(ES6)の書き方が有用そうです。
また、HTMLファイルに埋め込む時は、<script type=”module”></script> を指定しないとモジュールとして使えません。(エラーになります)
あと、インポートされたモジュールは Strictモードで動作します。
【使い方 1】エクスポートしたい関数を export文で指定する
export文を指定して関数を宣言すれば、その関数はエクスポートされる。
複数の関数をエクスポートしても、import文で {} 内でモジュールを指定してインポートすれば、まとめてインポートすることができる。
practice-01.html
<script src="./import-01.js" type="module"></script>
import-01.js
import { add, minus } from './export-01.js';
console.log( add(1, 2) );
console.log( minus(1, 2) );
export-01.js
export const add = (num1, num2) => {
return num1 + num2;
};
export const minus = (num1, num2) => {
return num1 - num2;
};
【使い方 2】
practice-02.html
<script src="./import-02.js" type="module"></script>