How can I offer multiple module formats for subfiles of a published npm library

Viewed 42

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?

0 Answers
Related