Given a package published on npm with a package.json that points to 3 separate distribution files, and that looks something like this:
{
...
"name": "@myorg/mymodule",
"main": "mymodule.umd.js",
"module": "mymodule.esm.js",
"unpkg": "mymodule.min.js"
}
and the public usage looks like:
import mymodule from '@myorg/mymodule'
mymodule() // ..does stuff
or when using commonJS
const mymodule = require('mymodule')
mymodule.default()
How do I structure my package to publish additional imports. For example, let’s say we want to publish a feature, or localization, and we don’t want that to be part of everyone's bundle, because only a few people will need that feature. Ideally the usage would look like:
import mymodule from '@myorg/mymodule'
import fr from '@myorg/mymodule/fr'
mymodule({
locale: fr
})
How can I structure my package to allow for this? Technically I'm able to do these imports, but if I publish an esm webpack or rollup fails (Unexpected token 'export') because they think it should be commonjs build and if I publish a umd they throw warnings about not being able to find the default export. The only effective way I was able to get this to work is when explicitly importing import fr from '@myorg/mymodule/fr.esm'
However, as a package maintainer, I would like to pre-configure the package to work better with the bundlers instead of requiring users to understand the internals of their bundler, or rely on their tree-shaking to reduce size. This already works great with main, module, and unpkg for the main file, how can I do something similar for other files?