CommonJSとESModulesのデュアルパッケージをつくる

Modules: Dual CommonJS/ES module packagesにかかれていることをrollupを使って対応する場合、以下のようになる。

パッケージ提供側

// rollup.config.js
export default {
  input: './index.js',
  output: [
    { file: './lib/package.cjs', format: 'cjs' },  // Node.js用
    { file: './lib/package.mjs', format: 'es' },   // ESModules用
  ]
}

// package.json
{
  "name": "package",
  "type": "module",
  "files": [
    "lib"
  ],
  // exports で ESM/CJS を分けるので、 ["main": "./index.js"] は不要
  "exports": {
    "import": "./lib/package.mjs",
    "require": "./lib/package.cjs"
  },
}

パッケージ使用側

// client.node.js
// lib/package.cjs が読み込まれる
const pkg = require('package')


// client.esm.js
// lib/package.mjs が読み込まれる（※ブラウザで実行する場合はバンドラーが必要）
import pkg from 'package'

デモ

• BcRikko/dual-package-example: Example of npm package for both CommonJS and ESModules