Github address of the project

NPM article

In the work, there will be some similar or the same thing between modules, and as a programmer we should refine the repeated code (abstract) out, packaged into functions, for several modules between the call, make the code more elegant, with the same is to improve their abstract programming ability. As our experience grows, we will find that there are some similar or identical things from project to project, so how do we extract and how do the extracted functions be used by each project? We can do this with NPM packages, such as React, Vue, ANTD, etc.

Quick start

Here is the NPM package setup process from 0-1

1. First of all, you need to have an NPM account, go to the NPM official website to register, remember your account password, you need to log in before sending packages.
2. Create a new folder for your code.
3. npm initGenerate the package.json project, default all the way, can be modified later (shortcut:npm init -y Generate default package.json)

4. Create a new index.js file in the root directory (because the entry file for package.json configuration is index.js)

5. Write some random code

6. NPM login login to the official NPM

7. NPM released the publish (note: before the release of NPM source to cut to the official source of NPM config set registry=http://registry.npmjs.org).

8. You can see all your packages on the NPM website

9. NPM install can be used to install and use your package.

10. That’s the end of it, isn’t it? However, the code we usually write is relatively complex, including react, VUE, ES6, TS and so on. It also needs to be compatible with a variety of platforms, which requires understanding of the concept of [module], as well as the processing of packaging and compilation of source code. In part 2 of this series, we will introduce.

How do I update packages?

Let’s start with a few NPM commands.

• npm view <package_name> versionsThis command displays the version of the package and prints the release version of the package.

• npm version <update_type>Update the local package version

Update_type has three values:

Patch (patch, version will be updated from 1.0.0 to 1.0.1, only third place increase)

Minor (minor changes, version will be updated from 1.0.0 to 1.1.0, with the second update)

Major (major change, version 1.0.0 to 2.0.0, first updated)

When we want to update the package, we need to modify the code first and then execute NPM version

Then publish NPM publish.

How do I delete a package?

NPM unpublish [<@scope>/]< PKG >@<version> NPM unpublish [<@scope>/]< PKG > --force // Delete the whole packageCopy the code

The project is hosted on Github

You need to build a Git repository to store your code. You can choose a platform (Githug, GitLab, etc.). Here we recommend Github.

1. Register a Githug account, log in, and create a New Git repository
2. In the nPm-libs foldergit initTo initialize the current directory as a Git repository
3. Add files in a directory to a local repositorygit add .
4. submitgit commit -m "init commit"
5. Add the remote warehouse addressGit remote add origin git remote add origin, can be used after being added successfullygit remote -vView remote warehouse address
6. Push local code to a remote Git repositorygit push --set-upstream origin master

• --set-upstreamshorthand-u The local branch is associated with the remote branch

summary

Build a private library platform

In front-end /Nodejs development, we usually develop public modules, but when developing functional modules, enterprises do not want to publish their core code to nPMjs.org. Although nPMjs.org provides a private method, most enterprises prefer to control their code in the internal environment. Today we will look at the three main approaches to NPM private modules.

Git + NPM link

NPM install in addition to the daily use of the following methods

npm install (with no args, in package dir)
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>

aliases: npm i, npm add
common options: 
[-P|--save-prod|-D|--save-dev|-O|--save-optional] [-E|--save-exact][-B|--save-bundle] 
[--no-save] [--dry-run]Copy the code

And then the following

npm install <git-host>:<git-user>/<repo-name> npm install <git repo url> npm install <tarball file> npm install <tarball  url> npm install <folder>Copy the code

For example:

npm install git+https://github.com/kongmengqian/npm-my-libs.gitCopy the code

Execution process & results

Then use NPM link to debug the package, as described in the debug section

Method two: CNPM private server

See NPM private module for 3 ways

Method three: Verdaccio

See verdaccio dead simple

BaoYuan management

It is recommended to use NRM to manage NPM packages. Of course, manual operation is also possible.

# installation NRM
npm i nrm -g

Check available package sources
nrm ls

# add verdaccio package source, alias strong(custom defined)
nrm add strong http://yourweb:yourhost/

# Switch to Verdaccio package source, switch once, valid for life
nrm use strong

# Register a user, then happily start the NPM operation
npm adduserCopy the code

Method 4: Nexus private server

See NPM private module for 3 ways

Tip:.npmrc

Configure the user name, password, and email address. This improves efficiency and reduces trouble

The author has not tried the last three methods, you can refer to the above articles for practice, the author will update his experience in the process of practice.

More package management

Lerna is an administrative tool for managing JavaScript projects that contain multiple packages.

You also need to know the concept of NPX

debugging

In the /npm-libs-project directory, perform NPM link

npm link (in package dir)
npm link [<@scope>/]<pkg>[@<version>]

alias: npm lnCopy the code

yarn

yarn link (in package dir)
yarn link [<@scope>/]<pkg>[@<version>]

yarn link <package_name>
yarn unlink <package_name>Copy the code

For example:

cd ~/npm-libs-project
yarn link
cd ~/dev-project
yarn link npm-libs-projectCopy the code

Now, any changes to ~/npm-libs-project will be reflected in ~/dev-project/node_modules/npm-libs-project/. Note that the link should be to the package name, not the directory name for that package.

NPM package directory: ~/npm-libs-project

In the project directory: ~/dev-project

For other operations, see nPM-link

Refer to the article

• NPM releases its own library (reference to this article for quick start)
• 3 Ways to Build a Private library platform for NPM
• NPM command line portal

Intellectual development

1. What are the other uses of NPM init?

• NPM init(NPM init) NPM init react-app my-app creates a project named my-app using create-react-app scaffolding.

• npm-package.json

• npm-version
• npm-scope
• npm-publish
• npm-link
• NPM command line portal (YARN command portal)