Last week I had an urge to create a simple stopwatch module for a future project. I recently got my feet wet with creating ECMAScript modules (ESM), and wanted to ensure that any module I created in the future would feel native to either CommonJS or ESM. Turns out it is very simple.

In the most skeleton form, my structure looked like this:

src/
└── index.cjs
index.js
index.mjs
package.json

All of the work for the module lives in src/, with the two root index files just providing exports to be consumed by parent modules. Here is how the relevant portions of the files above look:

src/index.cjs:

module.exports = class SomeClass {
    // code here
}

index.js:

const SomeClass = require('./src/index.cjs');

module.exports = SomeClass;

index.mjs:

import SomeClass from './src/index.cjs';

export default SomeClass;

package.json:

"main": "./index.js",
"exports": {
    "require": "./index.js",
    "import": "./index.mjs"
}

And that's it! This can certainly be scaled up to more than a single export, and it can include named exports as well.

Bonus: here is the stopwatch module I created.