Hi everyone,
I’ve just finished making an NPM package. It’s working great with ES6 modules, but I’m hitting a snag with older CommonJS projects. They can’t use it.
I used to use Rollup and a barrel file to make it work for both types. It did the job, but I’m wondering if there’s a better way now. Maybe something newer or simpler?
Anyone here tackled this problem lately? Or know a good way to make a package that works with both ESM and CJS?
I’d love to hear your ideas or tips. Thanks!
I’ve been in your shoes before, and I can say from experience that microbundle is a game-changer for this exact scenario. It’s like Rollup on steroids, specifically designed for creating libraries with multiple format support.
What I love about microbundle is its zero-config approach. You just point it at your source file, and it automatically generates UMD, CJS, and ESM builds. It’s been a lifesaver for me on several projects.
One tip: make sure to set up your package.json correctly. Use the ‘main’ field for CJS, ‘module’ for ESM, and ‘unpkg’ for UMD. This way, different environments will pick up the right version automatically.
Microbundle has saved me countless hours of configuration headaches. Give it a try - it might be just what you’re looking for.
hey there! i’ve dealt with this recently. have u considered using webpack instead? it’s pretty solid for handling both esm and cjs. another option is to use the ‘exports’ field in ur package.json to specify different entry points. might be worth a shot. good luck with ur package!
I’ve encountered this issue before, and I found that using dual package hazard patterns can be quite effective. Essentially, you maintain separate entry points for ESM and CJS in your package.json. Set up a ‘main’ field for CJS and ‘module’ for ESM. Then, structure your project with distinct dist folders for each format. This approach allows consumers to import your package correctly based on their environment. It does require some extra build steps, but it’s cleaner than using a bundler in my experience. Just ensure your package.json is configured correctly, and you should be good to go.