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()
関連情報
TypeScript 4.5 以降で ESM 対応はどうなるのか?
CommonJSとES Modulesについてまとめる