Let’s say you’ve developed a project in JS and want to share it with the world, whether it's a simple project which draws a circle (okay, this might not be the package you want to publish) or a complex one which you want to be used by thousands of developers like Jquery, you can publish them on NPM.
So, you have your project. You want it to be in a package-ready format to publish when you’re ready. All NPM Packages are in the same format:
So, the index.js file is where we have our base code. You should know what a README.md is and to make your project attractive on NPM, I suggest you put one. The LICENSE file is important, and you should definitely choose one. You can pick one at choosealicense.com.
Now that you have those files, (and make sure you don’t continue without them) we can move on to the package.json and package-lock.json files. These tell NPM about the package, so these are required. Make sure you have NPM and Node.js installed, and if you don’t, you can learn how to install NPM here.
So, we have NPM, Node.js, and the LICENSE, README.md, and index.js files. To create the package.json file, simply open up your terminal or command prompt, and run this command:
npm init
This will walk you through the commands for setting up your project and feel free to skip questions if you don’t know them, but it shouldn’t be that hard. You can also leave questions empty if you don’t want to include them. This should also create the package-lock.json file. If you’ve ever created a python package, the package.json file is basically the same as a setup.py file.
Although the npm init command walks you through some of the essential parts of the package.json file, there are several more things you can add, and you can view the full list here.
Make sure you register and have an account at https://npmjs.org to publish npm packages, and then run
npm login
in your terminal or command prompt. Login with the credentials from your account which you registered on NPM.
Okay, we’ve created all of our files and logged in, now what. We publish the package! Take one last look over your package, make sure everything is how you want it to be, make sure there are as little bugs as possible (you could change the version to vX.X.X alpha or vX.X.X beta instead in case there’s a bug you don’t notice), and then run the final command:
npm publish
Hooray 🎉🎉🎉! We did it! Or did we? Well… kind of. If you didn’t get an error, you’re good, but you might encounter an error which stops it from publishing. It might be because someone else is already using that name from your package. If the error it outputs is something like :
You do not have permission to publish [package-name]. Are you logged in as the correct user?
then that’s your problem. If that’s true, there are 2 options. The first way is obvious, think of a different name. But if you really like your name and want to keep it, you can scope it. This is something many people do, and although people will see it scoped on NPM, it doesn’t look so bad. You simply change your package name from name to @npmusername/package-name . Replace the @npmusername with your username on NPM and package-name with the original name of your package. For example, if your name on NPM was QLabs and the package name was minor, you can change it to @QLabs/minor . Let's say you don’t want to scope it, then you can add JS to the end of it so minor becomes minorjs or minorJS . But since many people use that, it might still come out with that error.
Now, if you still get an error that is telling you to upgrade your NPM account which costs money. Then you don’t have an error in your package.json. Instead of running npm publish run:
npm publish --access public
If it’s not that, you might have made a mistake in the package.json file or didn’t include one. Otherwise, you should put it on https://stackoverflow.com to get your question answered.
So, we’ve fixed all of our errors and published the package, now we test to see that we did the steps correctly. We use the npm install command.
npm install [package-name]
Make sure that when you install, you include the scope if you scoped it when trying to fix the error.
So, we did it! We successfully created an NPM Package! But don’t go yet. There’s more.
Further Reading, Examples, & Package Managers
- This article in the JavaScript in Plain English publication by Harsha Vardhan explains the differences between Yarn and NPM.
- NPM
- pnpm
- Yarn
- This article in the JavaScript in Plain English publication by Matt Goldwater explaining the history of all of the package managers and what they solved.
- This article on zellwk.com, by Zell Liew, is a really good tutorial on publishing NPM packages and also using NPM to test packages.
The full tutorial was published on DEV here - https://dev.to/quantalabs/how-to-publish-npm-packages-1j5m
Top comments (0)