• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The introduction

  • Whether you’re a developer on the front end, back end, or elsewhere,npm 和 yarnPackage management tools are essential for daily development, so what are some of the commands we use?

The statement

[package] === [package] | [package]@[version|tag]
Copy the code

The installation

General installation

  1. npm
    • throughNode.jsOfficial website, download and installNodeWill automatically installnpm.
  2. yarn
    • throughnpmThe installationyarn.
    npm install -g yarn
Copy the code

Prompt ⚠ ️ :npm 中 installI can write it as thetai.

other

  1. Windows installation yarn
  2. Mac installation of yarn

Viewing the Current Version

npm|yarn -v
// or
npm|yarn --version
Copy the code

Update the package management tool itself

npm

  • Update Latest version
NPM install -g npm@latest // Requires root permissionCopy the code
  • Install future releases
npm install -g npm@next
Copy the code

yarn

  • Update Latest version
yarn global upgrade yarn
// mac
curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
Copy the code

Global related

configuration

  1. To view
npm|yarn config list
Copy the code
  1. delete
npm config delete [typename]
Copy the code

Global package

  1. The installation
npm install -g [package]
yarn global add [package]
Copy the code

Prompt ⚠ ️ :yarn 中 globalMust followyarnAfter.

  1. update
npm update -g [package]
yarn global upgrade [package]
Copy the code
  1. To view
npm list -g --depth 0
yarn global list
Copy the code

Global mirror source

  1. To view
npm|yarn config get registry
Copy the code
  1. Modify the
NPM | yarn config set registry [origin]Copy the code
  1. delete
/ / 1. Command NPM | yarn config delete registry / / 2. Find.npmrc file delete Windows C:\Users\[username] Mac ~Copy the code

In the project

Initialize thepackage.json

npm|yarn init
Copy the code

The installation package

  1. Specify a name
npm install [package] --save-dev 
yarn add [package] --dev
Copy the code
  1. package.jsonAn existing package in
npm install yarn ? [install]Copy the code
  • instructions
    1. npm
      • --save === -S: installed in thepackage.json 的 dependenciesIn the.
      • --save-dev === -D: installed in thepackage.json 的 devDependenciesIn the.
    2. yarn
      • --save === -S: installed in thepackage.json 的 dependenciesIn the.
      • --dev === -D: installed in thepackage.js 的 devDependenciesIn the.
      • --peer: installed in thepackage.json 的 peerDependenciesIn the.
      • --optional: installed in thepackage.json 的 optionalDependenciesIn the.
  • dependencies 和 devDependenciesThe difference between
    • dependencies: Project (run, release to production) dependencies
    • devDependencies: Engineering build (development, packaging) dependencies.

Update package

npm update [package]
yarn upgrade [package]
Copy the code

Delete the package

npm uninstall [package] --save? -dev yarn remove [package]Copy the code

View installed packages

NPM list yarn list --depth=0 // --depth=0 Does not display package dependenciesCopy the code

The development ofnpm 包

The loginnpm

npm|yarn login
Copy the code
  • npmThe official website cannot be logged in (forget password and2FA), can passConcat npmcontactnpmOfficial, choiceI need help with something / I have account or billing issue.

Local test

  1. Development kit projects
npm|yarn link
Copy the code
  1. Test package project
NPM | yarn link/package/run/package development package yarn link after the name of the showCopy the code
  1. uninstall
/ / development kit project NPM | yarn unlink/project/test package NPM | yarn unlink [package] / run/package development package yarn display name after the linkCopy the code

release

NPM | yarn publish - tag < tag > / / specific label yarn add XXX @ beta NPM | yarn publish - access < public | restricted > / / release for limited public package or packagesCopy the code

More orders

  • NPM Chinese document
  • Yarn Chinese document
  • Set up the proxy for NPM

Past wonderful

  • Gold nine front-end interview summary!
  • Basic specifications for front-end development
  • Build from 0 Vite + Vue3 + element-plus + VUE-Router + ESLint + husky + Lint-staged
  • “Front-end advanced” JavaScript handwriting methods/use tips self-check
  • Public account open small program best solution (Vue)
  • Axios you probably don’t know how to use

“Likes, favorites and comments”

❤️ follow + like + comment + share ❤️, lingering fragrance in hand, thank 🙏 everyone.