javascriptでのファイル分割（importとexport）

export

分割するためにはまずはexpotしたいファイルに下記を記述して他のファイルでも参照できるようにする。class単位で参照できるようになる。

rei.js

class Rei{
}
export default Rei;

import

imprtしたい場合、下記のようにclass名とそのclassの記載されたファイル名を指定。

script.js

import Rein from "./rei.js";

export defaultの注意点

変数や関数もエクスポートできる

const text = "ababa";
export default text;

自動的にexportdefaultで設定したものがimportされる

const dog = new Dog();
export default dog;

import doggy from "";
doggy.info();

この場合doggyにはdogが入っている。上記のようにexport defaultは自動で代入してしまうのでファイル一つにつき一つしか使えない。

名前つきエクスポート

defaultをつけないで{名前}を指定すると名前に指定したもののみをexportできる。配列も可能。

export {名前};
export {名前1,名前2};

import {名前} from "";
名前.info();
import {名前1,名前2} from "";

ファイル名の記述

import {dog1,dog2} from "./dogData";
import {dog1,dog2} from "./dogData,js";

.jsはつけてもつけなくてもよし