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

2022年4月6日 18:36

※自分用備忘録です。

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

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

var pasta1 = peperoncino;
var pasta2 = carbonara;

export { pasta1, pasta2 };

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

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

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

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

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

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

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

import * as abc from "./mainjs";

console.log( abc.pasta1 );