targeting CJS and ESM modules

Question

Hello @wessberg, first of thank you for the wonderful utility, this helped unblock my project to target ESM/CJS with yargs-parser 💯

Here’s what I’m tying to figure out. I’ve created a module that uses tsc to target ESM, and uses rollup-plugin-ts to target CJS.

In my index I have:

export default yargsParser

This works well for my compilation to ESM, which maintains the same export, but I end up with the following syntax when using rollup-plugin-ts:

export { yargsParser as default };

I would rather than the export be:

export = yargsParser;

As I believe this is the best way to keep yargs-parser’s existing API surface.

Is there a configuration setting that would facilitate this?

[axtgr]

@bcoe you can try using the package I’ve recently made for this use case: https://github.com/axtgr/ts-transform-default-export

Adding it in your rollup.config.js like this should do the trick:

import ts from "@wessberg/rollup-plugin-ts";
import transformDefaultExport from "ts-transform-default-export";

export default {
  ...
  plugins: [
    ts({
      transformers: ({ program }) => ({
        afterDeclarations: transformDefaultExport(program),
      }),
    }),
  ],
};

It’s apparently even possible to use this combination to make Rollup produce both CJS and ESM bundles and a single declaration file that is compatible with both of them, possibly solving the problem mentioned by @wessberg. The declaration will have export default foo; export = foo, which isn’t super valid, but it seems to provide IntelliSense just fine for both CJS and ESM.

[bcoe]

@axtgr thank you 😄 I prefer this to my hacky replace logic.