ES6モジュールを反応させる
モジュール
JavaScriptモジュールを使用すると、コードを個別のファイルに分割できます。
これにより、コードベースの保守が容易になります。
importESモジュールはandexportステートメントに依存しています。
輸出
関数または変数は任意のファイルからエクスポートできます。
person.js、という名前のファイルを作成し、エクスポートしたいものをそのファイルに入力しましょう。
エクスポートには、名前付きとデフォルトの2種類があります。
名前付きエクスポート
名前付きエクスポートは2つの方法で作成できます。個別にインライン化するか、下部で一度にすべてインライン化します。
個別にインライン：
person.js
export const name = "Jesse"
export const age = "40"
一番下に一度に：
person.js
const name = "Jesse"
const age = "40"
export { name, age }
デフォルトのエクスポート
message.js、という名前の別のファイルを作成し、それを使用してデフォルトのエクスポートを示しましょう。
1つのファイルに含めることができるデフォルトのエクスポートは1つだけです。
例
message.js
const message = () => {
const name = "Jesse";
const age = "40";
return name + ' is ' + age + 'years old.';
};
export default message;
輸入
モジュールの名前がエクスポートであるかデフォルトのエクスポートであるかに基づいて、2つの方法でモジュールをファイルにインポートできます。
名前付きエクスポートは、中括弧を使用して非構造化する必要があります。デフォルトのエクスポートはそうではありません。
名前付きエクスポートからのインポート
名前付きエクスポートをファイルperson.jsからインポートします。
import { name, age } from "./person.js";
デフォルトのエクスポートからインポート
message.jsファイルからデフォルトのエクスポートをインポートします。
import message from "./message.js";