🔗 developing npm packages locally

hey y'all this is BG codes and I and Brad Garrity recently I did a livestream with James quick and showed him how to publish packages to NPM in this video series I'm gonna take that live stream and break it down into smaller digestible chunks to teach you the very same thing so the first thing we're gonna want to do is create kind of like a fake NPM package locally here on our machine and I'll show you how to import that package into other applications without publishing it to NPM first so here we have an empty directory let's just make like a very basic NPM package so we'll create a folder I'm gonna call it my package and let's very first thing create an index jeaious this will be the actual contents of our package we'll make it very simple and say like hello from my package maybe make it do like a console log and maybe we'll even export a method something simple like a method that says like say hello and maybe we can take a name parameter and just log out something simple like Hello and whatever that name parameter is and remember this is a node module so we use the module syntax module exports equals say hello so great that is a full minimal node module the next thing you have to do is create a package JSON file and in this this is a JSON file that tells NPM the node package manager meta information about this package there's very few things that are actually required here so we're gonna do the very minimum first of all you need a name field so let's make this name field whatever you want this could be my package we'll also give it a version this is very important we are early days so let's do 0.01 and then finally we need to have this main entry to say what file this package actually exports so when you require it what file is gonna get handed over to the application that is pulling it in in this case we want to give index dot JSP file functioning node module let's test that it works by going into the my package directory and actually running node indexed is in this case we should see the console log hello from my package perfect so now that we've created our very own node module we want to test that it actually works that we can import it into another application and use it so let's make a new folder and we'll call it my app right and inside of my app will have an index Tijs file as well and what we want to do is import my package just like any other node module so we could do something like Const and in this case we had a named export so we can D structure it and do say hello right because if we check my package we exported say hello an object with say hello defined in it so we're D structuring that object and we're using the require syntax because we're running a node and we're going to import my package now we haven't actually published this to NPM this isn't actually going to work just from importing this we should see the console log running as a side-effect but this will fail because the package hasn't been published yet so I'm gonna CD over into my app and give this a test I'll run node index dot JSP one to be able to test this locally on our machine without actually publishing to NPM so this is a two-step process first of all let me open a second terminal here you guys can't see that very well we'll see D over into the my package directory again and in order to test this locally or kind of fake that it's installed in the package directory you run NPM link what this does is it creates a symbolic link in your global node modules folder acting like this package actually got installed to your system and it points at this my package directory this kind of it as like a redirect from node node modules to this directory that you were in the NPM link command in now the second step is to go over to my app and then run essentially the same command but you actually have to tell it what to link to so this is kind of like the second half of the chain you can imagine over here you have your package over here you have your global node modules folder and over here at the other end of the triangle you have your application pulling it in you're connecting all three links so in your app you do NPM link and then the name of the package my package now you've kind of created that triangle where you have my package pointing to node modules which is pointing to my app now if we run my app again node index dot yes we'll see that say hello is actually well not say hello but the the side-effect of my package which is the console log of say hello for my package is actually call let's actually try to run and say hello and maybe they'll pass it in my name bread and now we should see not only hello from my package when it was required but also hello Brad so you've now essentially faked that that your local package has been installed and you can test locally and if you wanna if you want to back out that local installation once you've published it's also a two-step process very similar thing in your app directory you would NPM on link and then specify the name of the package again my package that severs one half of the triangle and then you'd go over to the my package directory and just like we did an NPM link before we'll do the opposite NPM unlink that removes it from your node modules directory that's it now if we if we run from my app this will fail again right module not found my package because we broke that link so in this video you should now know how to create a very very simple node module and use the NPM link command to test it locally before pushing it up to NPM in the following videos I'll go over how to actually publish this package to NPM and even automate that process so thanks for watching this is B G codes and I and Brad Garrity

Channel: Brad Garropy

Views: 3,741

Keywords: node, module, modules, node modules, npm, package, registry, publish, local, npm link, link, symlink, symbolic link, developer, web developer, webdev, javascript, nodejs, node.js

Id: VuysNccCnEQ

Length: 8min 21sec (501 seconds)

Published: Tue Jun 16 2020