npm-es-modules-1-naive

Breakdown of 7 different ways to use ES modules with npm today.

In this approach, we use normal .js file extensions for es modules and no transpilation.

It is relatively simple and straightforward but breaks several of our module goals:

Not usable from node.js because its main field is an es module whereas it should be a commonjs file.
Not usable from the browser via webpack or rollup because its browser field is an es module whereas it should be a commonjs file.
The only advantage of this approach is its simplicity, and this may be good enough if you are just working on private modules.
Warning: unless you are using strictly local or private modules, we strongly encourage you not to use this approach in practice. It is meant as an example of what not to do when transitioning from commonjs to ES modules, and if you publish a module publicly using this approach, the JavaScript Gods will find and shame you.
Unfortunately AFAIK, there is really nothing built into the npm ecosystem which prevents you from publishing broken modules like this, although as ES modules gain popularity over the coming years, I believe this will be addressed.

Approaches

naive - The most naive possible use of ES modules supporting our functionality. This approach is broken and provided as an example starting point.
babel - Uses babel to transpile all Node.js and browser source files.
esm-rollup - Uses esm for Node.js and babel+rollup to compile browser source files.
esm-webpack - Uses esm for Node.js and babel+webpack to compile browser source files.
rollup - Uses babel+rollup to compile all Node.js and browser source files.
webpack - Uses babel+webpack to compile all Node.js and browser source files.
typescript - Uses typescript to transpile all Node.js and browser source files.