Nodachisoft Nodachi Sword Icon
  
@Amaji✎ Update January -31-2021

How to make your npm package available to the public for the first time

What I write in the page

Packages that can be installed with the standard node.js npm command are managed by "npmjs", default npm registry. This time, I've released the npm package. This is a record of what you have done.

If this article is helpful, I'm so glad!

Steps to publication

  1. Create a project for your own npm package
  2. Create an account with npmjs (free)
  3. Publish the package you created to npmjs

1. Create a project for your own npm package

In the package.json of the package you want to publish, describe what you want to publish with npm.

Below is an example.

 
package.json
{
  "name": "gatsby-remark-text-decoration",
  "version": "1.0.0",
  "description": "Decorate gatsby markdown text(.md) with short ext-tags.",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nodachisoft-com/gatsby-remark-text-decoration.git"
  },
  "keywords": [
    "gatsby",
    "gatsby-plugin",
    "gatsby-remark",
    "text decoration"
  ],
  "author": "Amaji(https://nodachisoft.com/)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/nodachisoft-com/gatsby-remark-text-decoration/issues"
  },
  "homepage": "https://nodachisoft.com/",
  "devDependencies": {
    "jest": "^26.6.3"
  },
  "jest": {
     : about testing package confingurations.
  }
}

I picked up only those items that are particularly relevant and wrote about them below:

Item What to write
name Package name to register
version The version of the package. For now, the initial version is 1.0.0. When I upgrade in the future, I will increase the version.
description Package description
main Normally, index.js. The file specified here is the entry point for execution.
keywords Keywords for npm search

For example, the result of a npm search will look like the following

npm_search
> npm search gatsby text decoration
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
gatsby-remark-text-decora | Decorate gatsby…     | =amaji          | 2021-01-30 | 1.0.4    | gatsby gatsby-plugin gatsby-remark text decoration
tion                      |                      |                 |            |          |

The content registered in package.json is also displayed when searching!

Create the npm package

In the entry point javascript file (index.js in the above example), write the module in the following form.

 
index.js
module.exports = function() {
   : Functions to be realized as npm packages
}

The function specified in module.exports as CommonJS format will be referenced by other javascript.

Before release.

Before publishing a package on npmjs, let's do a quick self-check. Make sure that the contents of the package you are publishing are correct.

Be careful, you don't want to publish a strange file to the world!

Test code verification

公開するプログラムのテストコードを書いているなら、テストがすべて成If you are writing test code for a program that you are going to release, make sure that all the tests are successful and that you have a working package.

Restrict files that you don't want to publish

When publishing with npm, you can specify files that are not included in the package to be published.

You can do this in the following ways:

  • gitignore
  • npmignore
  • Put the files specification in package.json.

.gitignore file

This is the file that you want to exclude from being registered with the git server when you manage your project with git.

It is also checked when you enter the command to register it with npm.

.gitignore_example:clibboard
*.log
.cache
node_modules/

It is created when you create a project on GitHub with checking "Add .gitignore".

github-gitignore

.npmignore file

If this file is present, the .gitignore file will be ignored and the .npmignore file will be checked first. It is optional, so you don't need to have the file.

It is recommended to write test modules that are not related to npm execution in this file.

.npmignore_example
*.log
.cache
__tests__
node_modules/

Put the files specification in package.json.

This is the method of publishing directly in the npm package in package.json. This is optional, so you don't need to include it.

In package.json, enter the files item. This is a whitelist method. The files listed here will be registered in the npm registry.

Even if you exclude files in the .gitignore or .npmignore files, the files listed here will still be included.

For example, if you only want to work with index.js, you can write the following

 
package.json
"files": [
    "./index.js"
  ],

For detailed specifications, please refer to here (official - docs.npmjs.com - package.json - files).

2. Create an account with npmjs (free)

You can create an account from the official page. At the very least, all you need is an email address.

Go to npmjs.com - the official signup page and create an Create an account.

npmcreateaccout

    1. username is a username of your choice. It will be published in your profile. For example, my account profile can be seen at "https://www.npmjs.com/~amaji". When you create an account, a page at https://www.npmjs.com/~HogeHoge (where HogeHoge is your username) is automatically created and made available to the public.
    1. The e-mail address will be added as meta-information when the package is released. It may be made publicly available. It will not be visible from your profile, and it will not be added to package.json. However, if you don't want to be spammed, you may want to set up a dedicated account.
    1. Enter your password.
    1. Check if you agree to the terms of use.
    1. After completing the above steps 1 through 4, click the button to complete your account creation!

3. Publish the package you created to npmjs

Now, let's make your original packages available to the public so that they can be installed with the npm command!

Login to npm

Log in with the account you want to publish to npm.

Launch the console in the development environment and login with the npm login command.

login_to_npm
> npm login
Username: <Your username created with npmjs>
Password: <Your password created with npmjs>
Email: (this IS public) <The email address you entered in npmjs>
Logged in as <username> on https://registry.npmjs.org/.

and enter the npm password and email address that you just created. If the login is successful, you will see the message Logged in as <username> on https://registry.npmjs.org/.

Publish.

After logging in, you can use the You can use the npm publish command directly under the project folder you want to publish.

Execution example npm publish example

Here, as an example, we have registered our own package named "gatsby-remark-text-decoration".

If you see something like the following at the end of the execution log, the package has been successfully added to the npm registry.

You've done it, Yay!

+ gatsby-remark-text-decoration@1.0.0
npm registry to log in

If you don't specify any options in the npm login command, the default setting will be to log in to "https://registry.npmjs.org/". If you want to manage the registry on your own, specify the login address as desired! For detailed command specifications, please refer to [here (official) npmjs.com - CLI - npm-adduser]https://docs.npmjs.com/cli/v6/commands/npm-adduser).

Log out of npmjs

Use the npm logout command to log out when you are done.

 
login_to_npm
npm logout

Nothing is shown in the execution result, but I am able to log out properly.

Try to install it from npm

In order to check if the package has been released to the public, let's create a new node.js project and install the package we just released!

Let's create a folder called "testpackage" and install it.

 
check
> mkdir testpackage
> cd testpackage
> npm init
 : Just "Enter" everything and default to OK.
> npm install gatsby-remark-text-decoration
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN testpackage@1.0.0 No description
npm WARN testpackage@1.0.0 No repository field.

+ gatsby-remark-text-decoration@1.0.4
added 1 package from 1 contributor and audited 1 package in 1.689s
found 0 vulnerabilities

The installation was successful! A "node_modules" folder has been created under the trial folder "testpackage" and the package has been added.

Update the npm package

To update the npm package you have created, you can use the npm login command and then the npm publish command, just like the first time.

However, you need to increase the version number in the package.json. The way to raise the version number follows the rules of semantic versioning .

For now, if you are a user of the npm package and it is a minor version up that does not change APIs such as functions, you can change the version number from 1.0.0 to 1.0.1 by changing the ". If it is a minor version up, the number on the right side of the dot separator will be increased by one.

If you type the npm publish command without changing this version, you will get an error message saying "You have the same version" and the update will fail. The update will fail.

failed_example
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/gatsby-remark-text-decoration - You cannot publish over the previously published versions: 1.0.4.
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.

I want to remove the npm package.

You can remove it with the npm unpublish command. However, once a package has been published, its "package name + version" cannot be registered in the npm registry again.

My environment and version

  • OS: Windows 10 Home, version 2004
  • node-js: v12.18.2
  • npm: v6.14.5

One last thing

The following is a summary of the steps to publish the npm package that I made myself.

I hope this helps those of you who write useful programs to make them available to the public!

Websites and references that were very helpful.

npmjs.com - CLI - npm-adduser

npmjs.com - CLI - npm-logout

(英語)npmjs.com - gatsby-remark-text-decoration

Github - gatsby-remark-text-decoration

Rights, etc.

  • npm is a registered trademark of npm, Inc.

Page History

date modification
none
 
 
Message sent

Thank you for your message.

Something error has occured!

Sorry. The Error has occurred.We apologize for the inconvenience.Please try again in a few minutes or contact us via DM below.

Twitter:@NodachiSoft_eng
Name:
 
Replay To:
 
Message:
 
Back
Check the content!

Send the following information to us. If you are happy with your submission, please click "Send". If you want to modify it, please click "Back".

Name:
 
Reply To:
 
Message:
 
Enter a confirmation key to make sure that you are not operating from a Robot.
Confirmation Key is 95
Back
 / 
Go to Confirmation
Entry fields
Go to Confirmation

There are 1 articles that may be relevant!

Differences between dependencies, devDependencies, and peerDependenceise in npm package.json

#Npm✎ 2021-01-31
This is a summary of the differences between dependencies, devDependencies, and peerDependenceise in npm package.json. I use my own npm package as an example to explain.
Table Of Contents
How to make your npm package available to the public for the first time
How to make your npm package available to the public for the first time
What I write in the page
What I write in the page
Steps to publication
Steps to publication
1. Create a project for your own npm package
1. Create a project for your own npm package
Create the npm package
Create the npm package
Before release.
Before release.
Test code verification
Test code verification
Restrict files that you don't want to publish
Restrict files that you don't want to publish
.gitignore file
.gitignore file
.npmignore file
.npmignore file
Put the files specification in package.json.
Put the files specification in package.json.
2. Create an account with npmjs (free)
2. Create an account with npmjs (free)
3. Publish the package you created to npmjs
3. Publish the package you created to npmjs
Login to npm
Login to npm
Publish.
Publish.
Log out of npmjs
Log out of npmjs
Try to install it from npm
Try to install it from npm
Update the npm package
Update the npm package
I want to remove the npm package.
I want to remove the npm package.
My environment and version
My environment and version
One last thing
One last thing
Websites and references that were very helpful.
Websites and references that were very helpful.
Rights, etc.
Rights, etc.
Page History
Page History
Nodachisoft © 2021