現状、実装途中ですが調べたついでに書き留めています。
まずは注意点
実装途中ですので動かないものがあります。
その１
どうやら、名前からの呼び出しとデフォルトメンバーからの呼び出しをまだできません。
仕様上、以下の import が使えますが、動くのは赤文字のものだけです。
import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as alias from "module-name";
import defaultMember from "module-name";
import "module-name";
その２
import の際に相対のパスの場合 "./" を付けないと import できません。
import { sum } from "math.js"; // 動かない
その3
import の際、モジュール名の".js" を省くと動作しません。
import { sum } from "./math"; // 動かない
Modules とは？
JavaScript から他の JavaScript の指定しているプロパティ、関数、オブジェクトを呼び出すことができます。
使い方
以下の3つを行うと使用できます。
- 使用する場合、読み込む script タグに type="module" の属性を追加
- 読み込む方は import で呼び出し
- 呼び出し側は読み込むプロパティ、関数、オブジェクトに export をつける
下準備
アドレスバーに about:flags を入力し、JavaScript の項目の「試験的な JavaScript 機能を有効にする」にチェックを入れ有効にしてください。
使ってみる
math.js の足し算をする関数を import してを alert 関数で表示させます。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Modules</title> <script type="module" src="app.js"></script> </head> <body> </body> </html>
app.js
import { sum } from "./math.js"; alert(sum(1, 2));
math.js
export function sum(a, b) { return a + b; } export function mul(a, b) { return a * b; }
複数の export を呼び出す
export で設定したものは、明示的に指定しないと呼び出すことができません。
app.js
import { sum, mul } from "./math.js"; alert(sum(1, 2)); alert(mul(4, 2));
別名で export を呼び出す
app.js と math.js でプロパティ、関数、オブジェクトなどが被ってしまうとエラーが出ます。
そのため、回避するために sum の後に "as 別名" を付け別名で呼び出します。
app.js
import { sum as SUM } from "./math.js"; alert(SUM(1, 2));
仕様？ バグ？
確か明確には記載されていなかった気がしますが、import する JS のプロパティ、関数、オブジェクトに export がないと import 側でそのまま読み込めてしまします。
alert() など即実行すものを書くと、import した時点で実行されるようです。