How to Make a Javascript Library - Building With Typescript & Publish

[@MonsterlessonsAcademy]

WATCH NEXT: Typescript Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/aqHUlqJ-gctsf7csi=2gqvcpDDDDRorNpX

[@bharathram89]

You are amazing keep making videos brotha!

[@MonsterlessonsAcademy]

Thank you so much for your support. It means a lot to me!

[@Novacification]

Thanks for the response and a great video!

[@MonsterlessonsAcademy]

That you so much for your support. It means a lot for me!

[@luistabotelho]

This was a great introduction to making a library.

[@MonsterlessonsAcademy]

Glad to hear that!

[@mikezcooler]

An excellent tutorial. Very well explained and at a good pace. Thank you 💯

[@MonsterlessonsAcademy]

Glad you enjoyed it!

[@hideinbush0]

Just what I was looking for! Liked and subscribed.

[@MonsterlessonsAcademy]

Awesome, thank you!

[@RicardoLopesZe]

Very good content! Helped me a lot!

[@MonsterlessonsAcademy]

Glad to hear it!

[@xicheung7867]

Fantastic tutorial 👍 Thank you🙌

[@MonsterlessonsAcademy]

You’re welcome 😊

[@AntoineGUGLIELMI-vl1xo]

Perfect video, wahou ! Thank you so much !

[@MonsterlessonsAcademy]

You are welcome!

[@Nemesis_74]

It is what I have been looking for 😊

[@MonsterlessonsAcademy]

Awesome!

[@Nemesis_74]

@@MonsterlessonsAcademy 😊😊

[@GreenAsJade]

Gold! Subscribed!

[@MonsterlessonsAcademy]

Thanks!

[@GreenAsJade]

Could you comment on why we need the `lib` field of the `compilerOptions`? It doesn't work if that is not there, but typescript supposedly includes libraries for the DOM?

[@MonsterlessonsAcademy]

It is pretty good written in off docs www.typescriptlang.org/tsconfig#lib By default you get default browser libs. If you don't want that because you have a node app then you can change it.

[@krishna1794]

Amazing video very helpful

[@MonsterlessonsAcademy]

Glad you think so!

[@mikezcooler]

Thanks

[@MonsterlessonsAcademy]

Thank you so much for your support! It means a lot to me.

[@mikezcooler]

@@MonsterlessonsAcademy You are welcome. If I may, one suggestion, there feels to be a Part II that would be helpful. Because when you have got say large number of utility functions, each with their own sets of types declared in a separate types file in the function folder, then what is the "best" way to compile them. Options are to leave them all in their folders and let tsc do its business, with tsc given the include of src/**/*, another option is to export them and barrel them all up into a single file export for the entire library, and only to include that file. It may be a good idea to explore these follow on in a Part II. This aspect has not been covered here, and as I find myself thinking of this, I thought a Part II will be helpful for others. Not so much me, as I have to work this out now for myself.

[@MonsterlessonsAcademy]

@@mikezcooler Thank you for the idea! I will add it to the list of future videos.

[@mikezcooler]

@@MonsterlessonsAcademy very strange, I cloned your repo, added few more methods, declared a types file for each function defining the types being used in the corresponding function. Then add the extra functions to the export in the root index.ts file. However when tsc runs, it creates the index.js and an index.d.ts but instead of having types inside it, the created index.d.ts is the exact same as the index.js. So there is some configuration which does not work in the current project.

[@MonsterlessonsAcademy]

​@@mikezcooler It is correct that they look the same. To check if you can import in your project types later try to publish/link it in your project. You will get access to data types.

[@Novacification]

Great video! With two package.json how do you manage dependencies for your library. Do you need to manage two identical dependency lists?

[@MonsterlessonsAcademy]

I always made just a single package.json and put all dependencies there for both versions.

[@Novacification]

@@MonsterlessonsAcademy so all dependencies in the non-dist package.json?

[@MonsterlessonsAcademy]

@@Novacification yes

[@SaadMalaeb-qt3zk]

Sorry to jump in a year later, but about this topic: When you publish the package from dist and the dependencies are not there, the app will crash (unless you copy them manually). How to handle this?

[@mayurgawle1169]

Can I use this project in my resume ? btw great video

[@MonsterlessonsAcademy]

Sure, if you can prove the interviewer that you understand every single line of code and why it is done this way.

[@samuelolumorin1285]

what If I intend to use the library as a (CDN) in the script tag,

[@MonsterlessonsAcademy]

It is not intended for such use as in production projects we quite rarely use libs as cdn script.

[@rodmaniswild]

These things are new to me, I just added my first github repository. I'd like my js file to be included by a script tag on an HTML page and im struggling with it. How can it be done? (I mean anyone could include it, not only me)

[@MrTofi63]

Thanks for the video! Can you please explain how to use such library with CDN?

[@MonsterlessonsAcademy]

I will add it as an idea for other video!

[@pricklywiggles]

Doesn't this double the size of your package by bundling both common and es6 module versions.

[@MonsterlessonsAcademy]

Package yes. Imported package no as it is splitted in 2 versions.

[@Michaeljamieson10]

awesome

[@MonsterlessonsAcademy]

Thanks

[@berkvideo]

dude just go and use and IDE or something like VS Code dont stay behind current age

[@samuelolumorin1285]

Awesome explanation, thank you sir!

[@MonsterlessonsAcademy]

Glad you liked it