JSのimportとかrequireは、いっつも分からなくなるのでメモ・・

このQiita記事に分かりやすくまとまってたので、自分用にさらにまとめる。

  • ESM = ECMAScript Modules方式と、CJS = CommonJS Modules方式の2種類ある
  • ESMはimportで、CJSはrequire
  • ESMはブラウザ側JSの仕様で、CJSはサーバー側JSの仕様
  • で、実行環境を気にせず動作できるようにするには、webpackを使って差異を吸収する

ということらしい。

ESM式 import ブラウザ側

モジュール側

export const helloWorld = function() {
    console.log('Hello World!!');
}

利用側

import { helloWorld } from './module'

helloWorld();

CJS式 require サーバー側

モジュール側

module.exports = function() {
    console.log('Hello World!!');
}

const helloWorldModule = require('./module.js');

helloWorldModule();

その他

この記事も分かりやすい

結局、公式を読むのが一番安心感がある気もする