やりたいこと

パッケージの開発を行うにあたり、CommonJSとES Modulesの両方に対応したい😃

対応方法

CommonJS用とES Modules用の2つのJavaScriptを出力します。
出力するmoduleの分だけtsconfig.jsonを用意します。

以下の4つのファイルを用意します。

./
├── tsconfig.base.json
├── tsconfig.cjs.json
├── tsconfig.esm.json
└── tsconfig.json

tsconfig.json

{
  "extends": "./tsconfig.base.json"
}

tsconfig.base.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "outDir": "./dist/",
    // ...
  },
  // ...
}

tsconfig.cjs.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "./dist/"
  }
}

tsconfig.esm.json

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "module": "esnext",
    "outDir": "./dist/esm"
  }
}

package.jsonに以下の設定を追加します。

package.json

{
  "main": "dist/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/esm/index.d.ts",
  "scripts": {
    "build": "yarn build:cjs && yarn build:esm",
    "build:cjs": "tsc -p tsconfig.cjs.json",
    "build:esm": "tsc -p tsconfig.esm.json",
  }
}

main： commonjsのエントリーポイントとなるjsファイルを設定します。
module： esmoduleのエントリーポイントとなるjsファイルを設定します。
types：型定義ファイルのエントリーポイントとなるtsファイルを設定します。

これで完成です🤗

参考