What is NPM in a nutshell

  • NPM is a node module management tool and the largest shared source in the world. The NPM tool is shipped with NodeJS to make it easy for developers to share code, and NPM also offers a paid feature for private distribution. NPM includes the official NPM website, CLI (console command line tool), and Registry (package/software repository).
  • We can search interested packages, manage NPM user information, and consult documents through the official website of NPM.
  • We use CLI to initialize the NPM directory (NPM init), install the package (NPM install), publish the package (NPM publish), update the package (NPM update).
  • Is a huge software pool, can be understood as a large software warehouse. It contains the wisdom of developers all over the world, and when we need some wheels, we can get them directly from the NPM Registry via CLI. Basically popular JS open source code can be found in NPM corresponding distribution package.

Why do I need to publish my own NPM package

  • We need to share code before the project. For example, our projects are divided into common tool library, basic component library, business common library and so on. These libraries can be independently developed, published, and maintained. Being generic enough, we can solve the code sharing problem by publishing these libraries as NPM packages. Otherwise we would probably need to copy the code manually.
  • We may be willing to share some of the good code we use (open source) to the majority of users to expand their technical influence
  • We want to organize our code in a unified package management, dependency management (dependency retrieval) way, and unify the project build process.

How to release an NPM package to the official

Create an NPM account

  1. Go to www.npmjs.com and select Sign Up to go to the account registration page
  2. Fill in the registration information according to the prompts, click registration, the filled email will receive a verification code, enter the verification code to complete the registration.

3. After completing the registration, you can see the NPM homepage. You have finished registering your account here.

Create NPM packages locally

  1. Create a new folder my-test001-dateTime to develop an NPM package
mkdir my-test001-datetime
Copy the code
  1. Go to the command line and run NPM init
cd my-test001-datetime 
npm init
Copy the code
  1. Enter the NPM package information as prompted. Default values are in parentheses. If this parameter is not specified, the default value will be used.
package name: (my-test001-datetime)  // Define the package name. By default, use the same name as the folder
version: (1.0. 0) // Package version number
description: // Description of the packet
entry point: (index.js) // The package entry point, pointing to the import or require when importing the package
test command:  // Package test command to run the body of NPM run test
git repository: // Git link, which can be filled in if the package is git open source
keywords: // Search for keywords to help search in NPM pages
author: / / the author
license: (ISC)// Open source protocol

Copy the code

After the execution is complete, a package.json file is generated with the contents just filled in. At this point, the basic initialization of the NPM package is complete

{
  "name": "my-test001-datetime"."version": "1.0.0"."description": "just a test"."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": ""."license": "ISC"
}
Copy the code

Release NPM package

  1. The pakage.json we created above specifies the entry function to be index.js. Now create an index.js under the folder
touch index.js
Copy the code

Edit index.js to write a simple CJS export function, of course we can also write an ES6 export (export XXX).

function hello(name) {
    return 'hello ' + name + ', now is ' + Date(a); }module.exports = {
    hello
}
Copy the code
  1. Execute NPM login on the console, username using the account number you just created, and email using the email used for registration. The OTP verification code will be sent through the mailbox. After filling in the verification code, the NPM login is complete.
npm login
Username: xxxx
Password: xxxx
Email: (this IS public) 
npm notice Please check your email for a one-time password (OTP)
Enter one-time password from your authenticator app: 
Copy the code
  1. View the current NPM user information through NPM Profile GET on the console
| name │ │ XXX ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ │ email [email protected] (verified) │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ two - factor auth │ disabled │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ fullname │ │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ Homepage │ │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ freenode network │ │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ twitter │ │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ Making │ │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ created │ T03 2022-02-10: this was the 873 z │ ├ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┤ │ updated │ the 2022-02-10 T03: this was the 869 zCopy the code
  1. Execute NPM publish to complete the publication
NPM publish NPM notice NPM notice 📦 [email protected] NPM notice === Tarball Contents === NPM notice 215B package.json npm notice 90B index.js npm notice === Tarball Details === npm notice name: My-test001-datetime NPM Notice Version: 1.0.0 NPM Notice Package Size: 338 B NPM notice Unpacked size: 305 B npm notice shasum: 8db3b2be369857a0090c868ced510153b5bbd4c6 npm notice integrity: sha512-qbxSVkoYX01fZ[...] 1KnRL2UT1HwDg== NPM notice Total Files: 2 NPM notice + [email protected]Copy the code

Verify published packages

  1. Open the personal home page of NPM official website and you can see the newly released package

2. Create a new project to reference, create a folder test-mypackage, run NPM init, fill in the basic information of the NPM project, run NPM install my-test001-datetime

mkdir test-mypackage
cd test-mypackage
npm init
npm install my-test001-datetime
Copy the code

3. Create the index.js file and write the following code in the index.js file.

const hello = require('my-test001-datetime').hello;
console.log(hello('Kitty'));
Copy the code
  1. At this point we have finished writing the code, execute node Injdex.js directly and see that the Hello method is successfully called.
node index.js
hello Kitty, now is Thu Feb 10 2022 13:53:46 GMT+0800 (GMT+08:00)
Copy the code

5. In the test-mypackage directory node_moudles folder (this directory contains all the locally installed NPM packages under this directory) you can also find our newly released packages installed.

Create scope package @xxx/ XXX, such as @babel/ PRESET -env

We often see references like @babel/ XXX, @react/ XXX, @types/ XXX in development projects

import xx from @xxxx/xxx
Copy the code

Such packages are similar to namespaces for classes of the same name, called scopes in NPM. Such a package can help us create a semantically formatted registration without worrying about being unable to publish because of the same name. For example, if we want to publish a datetime package, but the package name is already used, we can choose to create our own datetime package.

  1. First create an Organization on the NPM page and click “+ Add Organization” under your profile picture.
  2. After creating an organization, you can send out private packages (for a fee), so we chose the free one. Fill in the organization name iamme007 to create a package similar to @iamme007/ dateTime.

  1. Create a Scope package. This step is similar to the create operation above. The only difference is that NPM init requires –scope to indicate scope
mkdir my-test002-datetime cd my-test002-datetime npm init --scope=@iamme007 package name: (@iamme007/ my-test002-dateTime) DateTime version: (1.0.0) Description: Entry point: (index.js) Test command: git repository: keywords: author: license: (ISC)Copy the code

The package.json file contains the following contents. Notice that name has changed to @iamme007/ dateTime

{
  "name": "@iamme007/datetime"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": ""."license": "ISC"
}

Copy the code
  1. Create the index.js file again and write the same code as above. Next thing you know, release.
  2. Unlike regular releases, we need to note that since we are using free organization management, we can only ship public packages. So we run NPM publish with –access public (scoped package is private by default). Otherwise you will be prompted to pay.
npm publish --access public
Copy the code
  1. The new @iamme007/ DateTime will also be available on the NPM website. To verify installation, run NPM install@iamme007 /datetime.

Private NPM package

Use the NPM paid service

NPM provides a paid service that enables the creation of private packages. Individual users pay $7 a month. One member of the team made $7 a month. Both support unlimited creation of private packages.

Build your own NPM service

In real development, we need some internally shared NPM packages, so it is important to build a private NPM source within the enterprise.

  1. NPM supports installing git repositories, and you can directly use private Git repositories to support NPM packages. Such as
npm install git+<https://xxx.xx/mypkg.git>
Copy the code
  1. Use jFrog ArtiFactory as the NPM Registry
  2. Verdaccio (open source, lightweight, private NPM Proxy Registry),
  3. CNPM + cnPMjs.org (KoA-based private NPM source solution)
  4. Other Sinopia (no longer maintained), NPM-Register (Requires Amazon Cloud support)