DEV Community

Cover image for Building an npm package in 2023

Building an npm package in 2023

Caleb O. 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 O.

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 O.

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 O. • Edited

Ah! That's great to hear Tbh!

Collapse
 
damian_cyrus profile image
Damian Cyrus

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 O.

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 O.

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