DEV Community

Cover image for Building an npm package in 2023

Building an npm package in 2023

Caleb! on June 14, 2023

Building an npm package requires a lot of decisions that need to be considered. From choosing a default bundler to selecting an appropriate transpi...
Collapse
 
rxliuli profile image
rxliuli •

We are now only compatible with esm, and all construction is done based on vite, and even wrote a vite plug-in for it to specifically support it.

ref: npmjs.com/package/@liuli-util/vite...

Collapse
 
seven profile image
Caleb! •

Oh, wow! This feels promising!

What about people who tend to bend towards the commonjs side of things?

Collapse
 
rxliuli profile image
rxliuli • • Edited

I just hate complicated compatibility issues. If they want to run node programs directly, they can use something like vite-node/tsx/esno/esm and those tools will handle it automatically. If it's a web program, which now almost certainly goes through a build tool, that's not a problem anymore.
I also wrote an article introducing
dev.to/rxliuli/developing-and-buil...

Thread Thread
 
seven profile image
Caleb! •

Oh! Nice! I get your point now.

Collapse
 
seanmclem profile image
Seanmclem •

Everything supports ESM now, excepts sticks in the mud.

Thread Thread
 
seven profile image
Caleb! • • Edited

Ah! That's great to hear Tbh!

Collapse
 
cyrdam profile image
Damian •

Good article!

For local testing the final, published package you can use verdaccio as a local npm registry. This way it is possible to test it like a real package with installation.

Collapse
 
seven profile image
Caleb! •

Oh wow! Thank you so much for suggesting this. I'll definitely give it a try when next I'm working on something

Collapse
 
odus_ex profile image
Aditya Tripathi •

Or Yalc

Collapse
 
seanmclem profile image
Seanmclem •

Why not have the package have a dependency for styled-components? Instead of having the user install the dependency, even if they don’t use it directly. Also, you pre-build the styles, why would the user need the styled components library at all, at that point?

Collapse
 
apestein profile image
Apestein •

Shameless plug, this is how to do it the right way with all the modern tools.
dev.to/apestein/how-to-publish-to-...

Collapse
 
seven profile image
Caleb! •

Ayy!! thank you for putting it here. I'll update the article too. :D