Okay. Recently github has provided this feature that you can also publish the same package to github as a github module. So we will try to explore both the options, how you can publish a package to npm, which is a node package registry node, package manager right and with there we have all the packages are available.
If you look at the express react, angular all the packages, we are doing the installation and we are fetching from the npm registry right now. You can also think about how can I publish my own package? You created some kind of utility, some kind of a commander tool, some kind of helper tool, cli tool which you wanted to publish like. You created some kind of a mock library which is going to mock your database in local storage or any other kind of http library, which is helping you same as xeos cache apis and all you wanted to publish those kind of packages.
So how can you publish and what all kind of module system you can support like uh? Consider this particular package react, or you can say express so express – is a npm module right and this some somebody has published this particular package, and now you will be able to install this particular package and use in your application right. So somebody has published it, and now, if I wanted to use, I can use it just like using require commonjs module or you can also use it in the typescript support ufi.
You can see import express as alias from express, so it is supporting everything because the alias type type script – typing type definitions are available for express. Similarly, if we just talk about angular angular has at the rectangular, where we have all the packages like angular c lines. Now, if I wanted to install it, what I will do is, I will simply do npm install minus c, it’s like a utility package, so you will install it globally and then you can.
You will be able to run all these different different commands right. Similarly, all these packages are published by someone you can see that this is the reference repository. This is the home page last published versioning. You can see the semantics versioning where you are actually major minor and patch version right. So all these things you have to manage now to support all these different things like your package, should be able to be imported as a common gs modules or the esx module.
When I talk about es6 module means you will be using the required syntax as a common gs module right if you are using import, export import, react from react or construct equal to require react. Both both are different right. So simple, like i’m just using this writer import react construct equal to require it. This is a common json view of common gsb of importing the module, but your module, which you publish to npm, should support common gs export so that you will be able to use it like this or otherwise.
You will do import react from react. Library – and this is what you do – this is a es6 view of import right, so we will see how you can publish a simple utility and which can support both and what we are going to do. We are going to support both the system, common gs and esx import, and we will use typescript for it because if you are using es6, so you should also be providing the typescript interface and typing the type definition for your library.
So, if any typescript project you are writing for the node.Js or the client side, you should be able to provide type definitions for it. Okay, so we will take a look, the basic things before publishing any npm module. So, first of all, you should have a npm account. Npm account means you should be able to login like you can do the sign in and you should be able to create a package. So I do have my account just try to see.
If I can do, I don’t have password on the system, so you should be able to do a login right. So how you can you can do all these logins using just simply npm login, okay here it will ask you your username. So if you have account, then you would be able to provide it and your npm password enter password. When you create your account, you should be getting it and your email id okay. So I am logged into this repository to this registry.
It’s npm global registry. Here I can publish my public project, a public library or private library. Okay, now coming to the code code, can be as simple as basic type script code or basic javascript code. What I am doing is, I am creating the build for common json eses es6 support. So I am using the typescript here if you can see the package.Js the definition here, I am using the type config right so few things which you just need to take care.
While you are publishing a typescript package, because you are writing code in typescript, you will be uh exposing the interface all the type definitions. So you should always make the declaration. True four types of packages – and this emit metadata decorations, experiment and decorations if you’re using any third-party module, they may need these flags as a tool so that you can expose the typings used by those modules and target is 2015 module system.
Is this strict true? So you will not be using any everywhere. You will be defining the types. These are the compiler options which you have defined and what you are including and type root. You will be adding a type root so in in index.Ps on your both the packages and output directory. When the compilation typescript build is done, you will get a liv esm, okay, so this is the kind of utility you are going to build.
Don’t treat these library as that they are. You are going to get an output as a ui, it’s just a cli library or some kind of utility and you’re just writing those classes which whoever is going. The end user is going to import this module and you you will be using these classes to execute some function, so your code can be as simple as just a simple like this functions, calculator or anything. Also.
I should consider that I am just exposing these two things. One is a function and one is a class okay. Now what i’m doing is, first of all the package.Json definitions and typing typing.Json, these two things you have to take care here. I will be supporting both the module system esm and here this cgs common gs and esm modules. So for common gs, this is another typing.Json. I will just extending the ts config, and I will be just overriding.
These two attributes in my compiler config, which is a model system, will be config and output directory for uh compiler types compiler will be cgs, so i’m using common js here here, i’m using esm. Okay, esm and cgs both outputs – I will be get when I do npm rental, so I did already npm install when I do npm run build for this particular code. So I i’m trying to get the build for both here. I’r executing both the things by passing both the configs in the tsc so as mentioned, output directory is different for both output directory and output directory for this ts, config is different.
So if you see the lib right, it’s a cgs common gs right. So if you take a look on to the index.Js, it is exporting like this, so whenever I wanted to use it, I will. However, I do it on hello equal to consider. This is a hello.Js file or library, hello. Okay, so I will just importing npm install uh this library name and then I will be able to install this package, something like this from that library.
Okay, this this library is just exporting one class and I will be getting it like this, so it is exporting, say hello and the class. So i’m getting two things from here: uh class, hello and the say hello function, so I will be able to import them. Something like this, like commonjs module way where you just use, require and in the require this particular module. Commonjs module is exporting two things module so how we do it module exports.
But here we are exporting two things say hello and hello, so you can selectively get either hello or say hello or both while you just require it. So you can write your code and you will be able to require. Similarly, if I just take a look on to my esm here, I will be getting the export import syntax right, so it is exporting two things. So what I can do is either you can just use import everything as uh.
All from this module, like uh module, name library name right now, I can just do – is everything dot here? I will just use the hello in my code or like everything, dots here. This is, how will I use, or I can just use import selective import either. Just like say, hello or hello, wrong library name, which i’m going to publish okay, and when you just put a library name, it will look into the node modules before, because you will publish this module, then you will install it.
This module will be available in the node modules and when you do it something like this, it will look inside a node modules inside index.Ts and it will find okay. Yes, I got the definition of hello and clo, so it will import that. Similarly, we can just do a selective impact input for this commonjs module here here you will just uh const like get everything constructs equal to, you can say, require this library name and then you can just do a dot around it and you can get see hello Or you can just get the hello okay, so this is the different way of importing exporting things, and i’m supporting my library, my library, supporting both things right before that you can also write your test coverage and all these things you can write.
So all the setup is done here. You can just look at the code if you want here, I have package.Json. So what is minimum thing to require to publish on the package to npm? Nothing, you just need a code. You don’t even need a repository, because npm is putting the repository what you have defined in the configuration. It is not saying. Okay, you just need to have a repository, but obviously, if you are publishing something we will be managing the version, so we create a github track tags and all and then from there we run a ci cd which indirectly publishing the module to the npm.
Now the data modules are also there, so you might be publishing the same module on the github as a getter module. So what I did is, I just did npm login, okay and one. The name of the package is test package right. So if you just look at the test package globally, there may be 100 package already there with name test package, but package name is unique, so I will be using my username as a prefix. So for tksarma, this test package is unique right right.
So i’m just putting my alias this is you can say the scope is my username or my own repository there i’m putting test package okay. So you have to select the name wisely. So i’m putting a test package in my repository and it is a public package. So, first of all, we have already done npm in it. What we need to do is, after once we are done. Npm init. We can just let’s try to do and claim publish so here you have to take care of publishing this package as the public package, so I have already written these instructions here how you are going to publish a package okay, so you just need to provide this Access public and if your package is already published, then you have to manage the versioning here.
I have a package.Json here. If the package 2 1.2.2 is already published, npm publish x is public, so you can see it is now published mobile package and it will publish the version latest version and now it is successful. I don’t see any error, and this is now package is available. You can just locate it or I can just show you okay. So this is my package name and it’s a public package so while defining it as a npm install npm, install minus minus save, you have to use this particular name.
Add that tk semaphore slash test package. The scope of this is around this okay, so my package name is unique. I don’t need to worry about the conflict you can see now you have to link it with some repository, so all these instructions you are specifying in your package.Json. The repository author registry registry is npm registry. It is common global repository, the repository url, because the same configuration will be published on the npm repository here.
You will see the link uh, the repository of the page. All the descriptions which you provide in the package.Json will be published on the npm site, and here is a description. Okay main will be the index.Js for commonjs and for the modules it will be index.Js in the esl. Okay, I just need a build instruction. Simply npm run build, so it will just generate a build for esm and cgs. Both and rest. You can do the testing and all these things length length fixed because you are, you might be writing a huge amount of code for a library.
So you need to take care of the linting library, uh linting testing testing coverage. You should be writing good code for this okay, so you can see see the author publish config repository and all right now, if I did npm publish, I did nothing. I just have a package.Json and you can create a package.Json using npm in it, and you can just provide the username basically tk server. Okay, there, you can initialize your uh basic package.
Json with the tksm as a username for the scope, okay, so publishing something to uh. I can say: npm is quickly very easy. You just need to have account. Second, you just log in npm, login and then publish npm login. Just you have just have a username password and your package will be published same as like this okay. Now, what? If I want to publish the same package to a gator module, okay, few things for the github module, it’s like a same process, but now what we are going to have, we are going to have it.
We are going to target github, only not npm as a publisher right. So few things which you need to change in your code is the publish config. So what published config is published, config is saying that now publish it will be targeting npm module, npm github, so it will be pointing to this domain npm.Package.Json.Com, and your repository name should be valid because before publishing, it will look at your github.
This is the username. Okay, do you have this repository there? The name of the package can be received, okay repository and you are now in the depend just just plug in with these things, so I already have this package.Get.Json with all the changes. So what we do is we will just rename it to package.Json and rename the existing one. Here I already have all the changes published config repository and the basic things, the package name and all it should be unique.
Okay and types types will be available in index dot d, dot ts, which is same in earlier version. Also in the package location, we were having lib integra dot d dot ts. So if you can see here here, I have whatever the code I have written. These are the types available for it, so whenever you import this package in the typescript project, where it will look for the default definition, typing is in the index.
Ts. So if you are using these classes, see hello and all these things, then it will look for the default typings here. Okay, the name is, it is expecting as a string if you are importing this library and passing name something else, and it will give an error because the typings are in the index.D index: dot d: dot, ts, okay, okay, so let’s get ready for publishing it to The github module, so what we need to do after doing all the changes, let’s rename it to existing package rotation to something, and here we can rename it to package.
Json okay. So it’s saying we have all the definitions here also, I will be publishing this library for both cgs and esm. Okay and library files will be in the live. The same instructions build a notch, only the publish configuration. The repository should be that available already, and I have this – is a typescript package. So if, if we talk about what is needed for the typescript library, okay, obviously you just need to have a typescript uh in the dependencies like.
I have a lot of things because i’m doing a testings and all these things – nyc moca, chai bluebird. All these things I need. But if you are writing a simple package without test and coverage and all then you just need to have a typings node.Js or a minimal typescript like here, okay, otherwise, once your package is published, if you see the dependencies dependencies are published here, you can see it.
These are the dependencies, and these are the dev dependencies – try not to increase by these too much, because your packet should be lightweight and you should not have a dependencies and on too many things too many external package try to write more on your own code. Okay, now, first of all, if we just go there, how to publish a github package, so you just need to have a github account that a basic thing, and now you can just follow the basic instructions npm login.
Okay, here is the command which you have to little bit careful about. You just need to log in first of all with the registry, it is npm login registry this and follow the prompts like this. Here I change the registry right now. It is targeting to npm.Package.Github.Com. So it is not seen as your npm login, and here, if you have two factored authentication enabled, then you have to pass your personal access token.
Okay, most probably yes, i’m logged in now. This is about when you wanted to use it. Okay. What I can do is, I can just figure the simple instructions: npm publish, okay, let’s see if we get any errors, so I think I bumped up the version, so it’s packaged or decent. So currently, the version is this: you can change this to one dot, one. So it is also following the same instructions, and now your one dot one is published.
Okay, it is quickly straightforward. You just did npm login. Just you just need to specify what you are targeting the registry is this right, so you will be targeting this registry and you are publishing npm package. This is also a public package. You already done. Npm run build so it will just create a live folder with the both the support, cgs and esf. Now we just need to do npm publish same as we are doing for the npm publish right now.
It will just see okay, where you’re logged in i’m logged in with npm, so it will just push this package now. If you wanted to see where it is published, and we can just see at github here, you can see. I have this test package and it is published auto product one right and I just have a dummy, redo file. I will just clean it just to see so if you wanted to use it, then npm install this. You have to use it in your code and this is how you will define it in your package.
Json okay, so your package is published here, 1.4.1 right, and so when you have a github package, you will just use the you can use the github actions to actually Create a tag for the previous package, so you will have you will maintain the the previous packages also and their code also right, so you can just create a github tag before publishing the new package and you should maintain the consistency of this versioning 1.
1 major miner And patch version – and you should be running all this – you can just configure a basic pipeline like this travis, where you will doing npm install and payment, build, npm, run test, and then npm pack or npm publish what it just needed. It just needed a github token, which you can just use the github environment variables to pass it okay, but here we just talked about how you can just create a basic package or basic library and can publish it to npm and github.
It just matter of your typing or ps, config and the compiler options. What you are targeting you just need to take care of very few things. Declaration should be true, you just define output directory your target and your module system. Module system can be a common js or can be. Es6 is 1020 here. For this I am using common js module pattern. I just creating the different different bundles. So when your package is being imported, you can import it as a requirements: module sorry, common js module where you are just doing a require, or you can use the import export like a es6 module where you can use it.
So the same code base, a typescript enabled where you have the typings defined, can be used as a es6 module as a common js module so most of the packages what they like is they don’t have the type type definitions available. So what they create is they create a type pack type definitions as a separate module right. Are they types? If you see so here around this, you will see type node s react react dom.
So if you have a big library, then you can define the typing separately right. So we have a node and type nodes, so it is providing the type definitions for all the node.Js core library things: okay, okay, so this is all about how you can publish a library written in the typescript and node.Js I mean we are just writing typescript and Javascript and you can publish it for the common json es6 module thanks.
Everyone thanks for reading. Please like subscribe, my blog, if you like the article
Jimmy's Internet Marketing Business Blog 