preface

When we develop front-end projects, we usually use code wrapped by others, such as demo/function/component library/framework/plug-in, etc. We usually choose: NPM method to install dependencies. Is NPM sen

Introduction of NPM

NPM is the Node.js standard package manager.

As of January 2017, there were more than 350,000 packages in the NPM repository, making it the largest single-language code repository in the world, and there are certainly packages available for just about anything.

It was originally used as a way to download and manage node.js package dependencies, but it has also become a tool used in front-end JavaScript.

NPM works well with module packers such as WebPack or Browserify

NPM installation is recommended when building large applications with Vue. Vue also provides companion tools to develop single-file components

NPM function

1. Install the software package

NPM can manage downloads that project depends on

A. Install all dependencies

If your project has a package.json file, run:

npm install
Copy the code

It installs everything the project needs in the node_modules folder (created if it doesn’t already exist)

B. Install a single software package

Run the following command to install a specific package:

npm install <package-name> --save
npm install <package-name> --save-dev
Copy the code
  • --saveInstall and add items to dependencies of package.json file
  • --save-devInstall and add entries to devDependencies in package.json file

2. Update software packages

Updates are also made easy by running the following command:

npm update
Copy the code

NPM checks all packages for newer versions that meet version limits.

You can also specify a single package to update:

npm update <package-name>
Copy the code

3. Run a task

The package.json file supports a format for specifying command line tasks that can be run using:

npm run <task-name>
Copy the code

For example, in the package.json file of a Vue project:

{
    "scripts": {
        "serve": "vue-cli-service serve"."build": "vue-cli-service build". }}Copy the code

We run it at the terminal

npm run serve
Copy the code

The serve task allows our local VUe-CLI project to run in the browser using the URL http://localhost:8080/#/, which is often used to debug our front-end projects

If we want our front-end project to update the package before running debugging, we can modify the serve field of the scripts object in the package.json file:

{
    "scripts": {
        "serve": "node node_modules/<package-name>/update && vue-cli-service serve"."build": "vue-cli-service build". }}Copy the code

How do I use or execute the NPM installed packages

Suppose you have installed loDash, the popular JavaScript utility library, with the following command:

npm install lodash
Copy the code

This installs the package into the local node_modules folder.

To use it in your code, simply import it into your program using require/import:

const _ = require('lodash') orimport _ from 'lodash'
Copy the code

In addition, for example with the Vue + Webpack package, to import the component library globally, you need to write in main.js:

import Vue from 'vue';
import router from './router';
import store from './store';

// Import the component library
import PackageName from '<package-name>';
import '<package-name>/lib/index.css';

Vue.use(PackageName);

const app = new Vue({
  store,
  router,
  render: (h) = > h(App),
}).$mount('#app');

window.app = app;
Copy the code

The NPM version is faulty

Version control

In addition to simple downloads, NPM also manages version control, so you can specify any particular version of the installed package, or require a version higher or lower than the required version.

npm install <package-name> <version>
Copy the code

Package versions can be written in one of three ways:

  • “packageName”: “15.2.1“Only matchA version, indicates: Only download15.2.1The version of the
  • “packageName”: “~ 15.2.1“Match the nearestSmall versionDependent package: indicates download>= 15.2.1&& < 15.3.0The version of the
  • “packageName”: “^ 15.2.1“Match the latestThe big versionDependent package: indicates download>= 15.2.1&& < 16.0.0The version of the

Many times, a library is only compatible with the main version of another library. Or, a bug (still unfixed) in the latest version of a library causes problems.

Specifying an explicit version of the library also helps to keep everyone using the same package version so that the entire team can run the same version until the package.json file is updated.

How do I view the installed version of the NPM package

To view the latest versions of all installed NPM packages, including their dependencies:

npm list
Copy the code

Such as:

❯ NPM list/Users/Joe/dev/node/cowsay └ ─ ┬ cowsay @1.31.├ ─ ─ the get - stdin @5.01.├ ─ ┬ optimist @0.61.│ ├ ─ ─ minimist @0.010.│ └ ─ ─ wordwrap @0.03.├ ─ ┬ string -width @2.11.│ ├ ─ ─ is - fullwidth - code - point @2.0. 0│ └ ─ ┬ strip - ANSI @4.0. 0│ └ ─ ─ the ANSI - regex @3.0. 0└ ─ ─ strip - eof @1.0. 0
Copy the code

Installing historical versions

Older versions of NPM packages can be installed using the @ syntax:

npm install <package>@<version>
Copy the code

It may also be necessary to list all previous versions of the package. You can use NPM view versions: 

❯ npm view cowsay versions

[ '1.0.0'.'1.0.1'.'1.0.2'.'1.0.3'.'1.1.0'.'1.1.1'.'1.1.2'.'1.1.3'.'1.1.4'.'1.1.5'.'1.1.6'.'1.1.7'.'1.1.8'.'1.1.9'.'1.2.0'.'1.2.1'.'1.3.0'.'1.3.1' ]
Copy the code

Uninstall the NPM software package

To uninstall packages that were previously installed locally (using NPM install in the node_modules folder), run from the root folder of the project (the folder containing the node_modules folder) : 

npm uninstall <package-name>
Copy the code

This operation also removes references in the package.json file if the -s or –save flags are used.

If the package is a development dependency (listed in devDependencies in the package.json file), it must be removed from the file using either the -d or –save-dev flags:

npm uninstall -S <package-name>
npm uninstall -D <package-name>
Copy the code

If the package is installed globally, you need to add -g or –global flags:

npm uninstall -g <package-name>
Copy the code

Package. The json guide

For a guide to package.json, see the official website

Refer to the article

  • Node.js official website to get started