雰囲気で書いてたため調査
require
CommonJsで策定されている仕様です。
CommonJsとは、主にNodeJs(ブラウザ外のJs)でのモジュールシステムの標準化に焦点を当てたプロジェクトとのこと。
たしかにフロントエンドのJsでrequireはあまり見たことないですね。
使い方
二通りあります
module.exports(default export)
・requireする側では任意の名前で読み込むことが可能
・module.exports自体は1ファイル内でいくつでも定義可能だが、最後のエントリが有効になる
module.exports = (a, b) => a - b;
module.exports = (a, b) => a + b; // これが有効
const add = require('add.js');
console.log(add(1, 2)); // → 3
exports(named export)
・requireする側に名前を強制することが可能
・1ファイル内で別々の名称でexportsすれば複数定義可能
exports.add = (a, b) => a - b;
exports.devide = (a, b) => a / b;
const calc = require('calc.js');
console.log(calc.add(1, 2)); // addという名前が強制される
console.log(calc.devide(10, 2)); // devideという名前が強制される
下記のように部分的にrequireすることも可能です。
const { add } = require('calc.js');
console.log(add(1, 2));
const { add: a } = require('calc.js'); // ちなみにこうすることでaという名前で読み込める
import
ECMAScriptで策定されているESModuleという仕様です。
ECMAScriptとは、ブラウザで動くJavascript仕様の標準化プロジェクトです。
各ブラウザはECMAScriptの仕様を満たすようにJavascriptを実装します。
(あまり自信ないです。。。間違ってたらご指摘ください)
とはいえ、ESModule自体は最近のNodeJSではサポートされています。
export default(default export)
・CommonJsのmodule.exportに対応するもの
・1ファイル内に1つしか定義できない
export default (a, b) => a + b;
import add from './add';
console.log(add(1, 2)); // → 3
下記のようにimportすることも可能です
import * as add from './add';
console.log(add.default(1, 2)); // → 3
export(named export)
・CommonJsのexportsに対応するもの
export const add = (a, b) => a + b;
export const devide = (a, b) => a / b;
下記のように書くことも可能です。
const add = (a, b) => a + b;
const devide = (a, b) => a / b;
export { add, devide };
import { add, devide } from './calc';
add(1, 2);
devide(10, 2);
下記のようにすることも可能です
import * as calc from './calc';
calc.add(1, 2);
calc.devide(10, 2);
CommonJs VS ESModule
NodeJsでESModuleがサポートされたので、もう全部ESModuleで良いのでは?と思ったのですが現時点ではどちらかに全寄せするのは難しそうです。
ちゃんと調べられてないのでまた別途まとめます。。。
default export VS named export
これはnamed export一択では?と思ったけど界隈ではdefault export派もいるそう。。。
ここも別途調べてみます。
最後に、私のExpress(Typescript)はESModuleでしか書いてないなと思って確認したら、トランスパイル後のJSはCommonJSの形式になってました(なんと)
NodeJsプロジェクト全体にESModuleを適用するのもいろいろやらんといけないらしいです。
このへんもまた取り上げたいです。