aelbore/esm-cjs-modules.md

## esm-cjs-modules.md

      
    Raw
  

              esm-cjs-modules.md
            
          
    Create your library


Initialize project npm init -y
Create esm module ./src/esm/my-lib.js
function addNumber(value, value2) {
  return value + value2;
}

export { addNumber };

Create commonjs module ./src/cjs/my-lib.js
function addNumber(value, value2) {
  return value + value2;
}
exports.addNumber = addNumber

Create ./src/cjs/package.json for commonjs backward compatibility
{
  "type": "commonjs"
}

Create library package.json ./src/package.json
{
  "name": "esm-package",
  "type": "module",
  "main": "./cjs/my-lib.js",
  "module": "./esm/my-lib.js",
  "exports": {
    ".": {
      "require":  "./cjs/my-lib.js",
      "default": "./esm/my-lib.js"
    }
  },
  "typings": "my-lib.d.ts"
}


How to use the package


Use the package as esm module

update your package.json file (add the following)
...
"type": "module",
...

create index.js

import { addNumber } from 'my-lib'

console.log(addNumber(2,3))

Use the package as commonjs module

update your package.json file (add the following)
...
"type": "commonjs",
...

create index.js

const { addNumber } = require('my-lib')

console.log(addNumber(2,3))


Using rollup to bundle your package


package.json
{
  "name": "my-lib",
  "version": "1.0.0",
  "type": "module",
  "typings": "my-lib.d.ts",
  "main": "./cjs/my-lib.js",
  "module": "./esm/my-lib.js",
  "exports": {
    ".": {
      "require":  "./cjs/my-lib.js",
      "default": "./esm/my-lib.js"
    }
  },
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^2.10.5",
    "rollup-plugin-copy": "^3.3.0",
    "rollup-plugin-dts": "^1.4.6",
    "typescript": "^3.9.3"
  }
}

rollup.config.js
import dts from 'rollup-plugin-dts'
import copy from 'rollup-plugin-copy'

import { writeFile, mkdir } from 'fs/promises'

function createCommonJsPackage() {
  const pkg = { type: 'commonjs' }
  return {
    name: 'cjs-package',
    buildEnd: async () => {
      await mkdir('./dist/cjs', { recursive: true })
      await writeFile('./dist/cjs/package.json', JSON.stringify(pkg, null, 2))
    }
  }
}

export default [
  {
    input: './src/my-lib.js',
    plugins: [
      copy({
        targets: [
          { src: './package.json', dest: 'dist' }
        ]
      }),
      createCommonJsPackage()
    ],
    output: [
      { format: 'es', file: './dist/esm/my-lib.js' },
      { format: 'cjs', file: './dist/cjs/my-lib.js' }
    ]
  },
  {
    input: './src/my-lib.js',
    plugins: [ dts() ],
    output: {
      format: 'es',
      file: './dist/my-lib.d.ts'
    }
  }
]


Use ts-node


As of now ts-node with esm still in "Experimental"
Please see https://github.com/TypeStrong/ts-node and TypeStrong/ts-node#1007
add scripts to your package.json and update type to module
{
  "type": "module",
  "scripts": {
    "run:tsnode": "node --no-warnings --loader ts-node/esm.mjs index.ts"
  }
}

tsconfig.json file
{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2018"
  }
}