Publishing both es6 and commonjs with subfolders

Question

• I want to be able to import module from subfolder like this, without any lib folder, https://davidwells.io/blog/publishing-flat-npm-packages-for-easier-import-paths-smaller-consumer-bundle-sizes/
• I want to publish both CommonJS and ES6 modules

I can specify the main file for commonjs with "main": "./index.js" and for es6 with "module": "./index.es.js" in package.json .

But how does it works when I import my-package/myfile ? Is myfile.js used or myfile.es.js

And why it isn't possible to specify a subfolder instead of a single main file ?

Answer 1

There's not a lot of magic going on in that blog post you mentioned, he's just asking for node_modules/his-module/P.js

The bundlers need a single entry because (in theory) that is where you have your

module.exports = {}

code which is what lets the bundlers access your functions.

If you are using an esmodule compatible bundler like webpack or rollup, they will read the module key

import someFunction from 'your-module';

Would import the es module unless you are using something like browserify which would take the commonjs version.

You can also ask explicitly for a different file

import someFunction from 'your-module/lib/index.min.js';

Whatever file you ask for here, it'll import that. If you add a / after your-module you are now breaking out of the main or module path conventions and asking for whatever file you want.