CommonJSとES Modulesの相互運用

CommonJS (CJS) と ES Modules (ESM) ではモジュールの扱いがちょっとちがう。

CommonJS では require と dynamic import が使える

ES Modules では import のみが使える

TypeScript の場合は tsconfig.json によりまた微妙にビルド後の結果に影響を与えることがあるので参考記事を参照してください。

CommonJS から ES Modules を使う

基本的に dynamic import を使う

code:ts

// 基本: モジュールをまるごと import する

const foo = async () => {

// dynamic import でモジュールを読み込むときは await を忘れずに

const module = await import('module')

// default export されているものは import 後のオブジェクトから default で参照できる

module.default()

// named export されているものはその名前で参照できる

module.namedFunction()

}

// 応用: default みたいな名前を利用時に変更する

const bar = async () => {

// import するときに関数に別名を付けたいときはこんな感じにする (defaultをmodという名前で使う例)

const { default: mod } = await import('module')

mod()　// 基本の module.default と同じ

}

ES Modules から CommonJS を使う

通常通り import を使える

code:ts

import { something } from 'module'

something()