DEV Community

I created my first TypeScript library and published it on NPM

Lea Rosema (she/her) on June 15, 2020

Recently, I've published my very first library as an NPM module and I'd like to share my learnings and struggles with you. The module I'm talking ...
Collapse
 
hendrikfoo profile image
Hendrik Richert

Good write up!
Is there a specific reason why you include the src folder in your package?

The way I do it is to only have dist-files in the npm package, and on the other hand gitignore those for the GitHub repo.
As in:
repo: sources and config only
package: dist only

Your consumers might enjoy the smaller package size if you leave out sources from the bundle :-)

Collapse
 
learosema profile image
Lea Rosema (she/her) • Edited

Good point, I think excluding src from the package is the right way.

Initially, I thought of a scenario when using TypeScript, one could somehow import directly from the ts sources, and let the bundling be done by one's own transpiling toolchain, but that's out of scope of NPM, I guess. At least, there is no clean way to do that via NPM (yet).

Collapse
 
hendrikfoo profile image
Hendrik Richert

cough deno.land/ cough :-)

Collapse
 
jwp profile image
John Peters

Thanks for excellent article and background.

Do you think creating npm modules from Typescript is tedious?

Why was UMD the winner?

Are there easier ways if we just stick to esm2015?

Collapse
 
learosema profile image
Lea Rosema (she/her) • Edited

Of course, I'd favorize ESM over UMD but I've had some issues using ESM. So, I stuck to UMD for now.

Main reason: Coding playgrounds like JSFiddle or CodePen. Although you can use ESM in Codepen, it does not work as soon as you select some sort of transpiler for your code (Babel, TypeScript, Coffeescript, ...). To get it work with TypeScript, you will need to include the script as an UMD module in the settings panel.

Also, the LTS version of node still displays the ExperimentalWarning.

I guess as soon it is safe to get rid of the UMD build, things may get easier.

Collapse
 
jwp profile image
John Peters

Would you agree the whole JavaScript module system is a mess?

Angular has it's decorator class ngmodule which works but it seems difficult because error messages are very bad.

Collapse
 
nazimboudeffa profile image
Nazim Boudeffa

Great Work !

Just to say, I use to install my modules directly from GitHub with npm, in this case

$npm install github:terabaud/ella-math
Collapse
 
learosema profile image
Lea Rosema (she/her)

Cool, didn't know about that :)

Collapse
 
nazimboudeffa profile image
Nazim Boudeffa

I have started a project in pure js and npm (not yarn) github.com/nazimboudeffa/vitaminx

Any chance for a tutorial on how to perform matrix operations ?

Collapse
 
terkwood profile image
Felix Terkhorn

Best motivation ✌️

Collapse
 
ben profile image
Ben Halpern

Epic

Collapse
 
rapixar_dev profile image
Raphael Chinenye

Good stuff! Perhaps I could use this for some machine learning tasks

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

terabaud.github.io/ella-math/modul...

I've just learnt about Documentation Generator today, but it seems you still have to write more TSDoc (or JSDoc).

Collapse
 
learosema profile image
Lea Rosema (she/her) • Edited

Yes, it's not complete yet. Also, the jsdoc (or tsdoc) generates API documentation, which is nice for autocomplete and looking up functions in an API reference. But there should also be some kind of detailed documentation about how to get started using it.