JavaScriptのモジュール化（ファイル分割）

※自分用備忘録です。

importする側のscriptに「type="module"」を追加

<script type="module" src="js/script.js"></script>

export

var pasta1 = peperoncino;
var pasta2 = carbonara;

export { pasta1, pasta2 };

下記のようにも記述できます。

export var pasta1 = peperoncino;
export var pasta2 = carbonara;

import

import { pasta1, pasta2 } from "./mainjs";

importした変数は「as」を使って変数名を変えることができます。

複数のファイルをモジュール化した際に同じ変数名が出てきた時などに変数名を変えることで対応ができます。

import { pasta1 as pasta3, pasta2 } frome "./mainjs";

importした変数はimportした側では上書きや書き換えができません。
import側で書き換えようの変数を用意する必要があります。

まとめてimport

import * as abc from "./mainjs";

console.log( abc.pasta1 );

その他のJavaScriptに関する記事はこちらから

JavaScriptマガジン｜ピヨ彦｜note