How to publish your component to npm

The front-end components are developed in javascript, packaged in Node.js and published to npm. So we want to do component release, we need to understand the development and release of npm package first.

npm package project initialization

We often use the npm init command to initialize node projects.

If the default settings are used, you can add the -y parameter. now we create a new npm-components folder and initialize the project:

$ mkdir npm-components
$ cd npm-components
$ npm init -y

npm init -y will create a package.json file.

{
  "name": "npm-components", // component name
  "version": "1.0.0", // component version
  "description": "", // component description
  "main": "index.js", // component entry file
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "", // component author
  "license": "ISC" // component license
}

main: The entry file of the component. default is index.js.

now we can start to create index.js file.

// index.js
const hello = "hello";
const world = "world";
module.exports.log = function () {
  console.log(hello + world);
};

a very simple npm package project is created. This project only contains a index.js file and a package.json file.

npm version specification

The version format is major.minor.patch, and the increment rule is as follows:

major: When you make incompatible API changes, minor: When you make backward-compatible feature additions, patch: When you make a backward-compatible problem fix.

The prior version number and version build information can be appended to major.minor.patch as an extension. Such as: 1.0.0-alpha.0.

Before each release, you need to confirm the updated content, select the version number, and use npm version to type the version number.

npm version [patch|minor|major]

At this point, version in package.json is incremented by 1, and you can also see the version number change in some command-line tools.

~/npm-components  (npm-components@1.0.0)
$ npm version patch
v1.0.1

after

~/npm-components  (npm-components@1.0.1)

Published to the npm

Once the development is complete and the version number is marked, publishing to npm is a step-by-step process:

If it is an open source project on the public network, you need to register an account on npm official registry.
If your company has an internal npm registry, you just need to find the npm manager to add it to you.
If other sources are used, switch to the npm official registry. We use the nrm to manage npm registry.

nrm ls

npm -- https://registry.npmjs.org/
yarn -- https://registry.yarnpkg.com/
cnpm -- http://r.cnpmjs.org/
taobao -- https://registry.npm.taobao.org/

nrm use npm

Run the command line tool npm login in the root directory of the project. The system prompts you to enter your personal information.
Run npm publish to publish the project to npm.
If the upload process is successful. you can see your npm package in the npm registry.

Note: npm package can be deleted for 72 hours, after which it can never be deleted, so don't post meaningless packages. If uninstallation is required, perform it within 72 hours of release: