提示：了解和理解npm、npx、nvm、nrm

前言

提示：npm npx nvm nrm 是管理node服务相关的，需有node环境

node官网【cn】
node官网【en】
node安装教程

一、npm 是什么？npx 呢？

提示：npm英文全称 ----Node Package(包) Manager(管理器)。和Java的Maven 一样都是包管理工具

npm(Node Package Manager)是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

1.npm

安装

下载安装好node,就一起安装了npm了 . …… 查看版本 npm -v
来安装一个包，以安装express为例

生成依赖

npm install express
or或者
npm install express --save

开发依赖

npm install express -D
or或者
npm install express --save -D

全局安装

npm install express -g

详情npm命令教程
感受一下

npm list -g

这命令看到所有的安装包的列表，有点多

在这里插入图片描述

官方文档

前端工程化的执行，初始化时执行如下命令生成package.json

 npm init -y

会生成一个package.json ,我们执行 npm install <包名>安装包依赖时就都会在这里，简写npm i = npm install

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  
  "author": "",
  "license": "ISC"
}

一个百万级的前端项目的package.json 里边安装的依赖内容

{
  "name": "admin",
  "version": "3.3.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:sit": "vue-cli-service build --mode production.sit",
    "build:uat": "vue-cli-service build --mode production.uat",
    "build:prod": "vue-cli-service build --mode production",
    "lint": "vue-cli-service lint",
    "et": "node_modules/.bin/et",
    "et:init": "node_modules/.bin/et -i",
    "et:list": "gulp themes"
  },
  "dependencies": {
    "@vue/composition-api": "^1.4.0",
    "@vueuse/core": "5.3",
    "axios": "^0.19.0",
    "babel-eslint": "^8.0.1",
    "babel-plugin-component": "^1.1.1",
    "clipboard": "^2.0.6",
    "element-theme": "^2.0.1",
    "element-ui": "^2.15.6",
    "file-saver": "^2.0.5",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-clean-css": "^4.2.0",
    "gulp-load-plugins": "^2.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "js-cookie": "^2.2.0",
    "lodash": "^4.17.15",
    "moment": "^2.29.1",
    "monaco-editor": "^0.20.0",
    "monaco-editor-webpack-plugin": "^1.9.0",
    "portfinder": "^1.0.28",
    "qs": "^6.7.0",
    "quill": "^1.3.6",
    "screenfull": "^4.2.1",
    "sortablejs": "^1.10.2",
    "svg-sprite-loader": "^4.1.6",
    "vue": "^2.6.12",
    "vue-cron": "^1.0.9",
    "vue-demi": "^0.12.1",
    "vue-i18n": "^8.12.0",
    "vue-monaco": "^1.2.1",
    "vue-router": "^3.0.7",
    "vuedraggable": "^2.24.3",
    "vuex": "^3.1.1",
    "vxe-table": "^2.10.10",
    "wcwidth": "^1.0.1",
    "xe-utils": "^2.8.3",
    "xterm": "^4.15.0",
    "xterm-addon-fit": "^0.5.0",
    "xterm-addon-webgl": "^0.11.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.1",
    "@vue/cli-plugin-eslint": "^3.12.1",
    "@vue/cli-service": "^3.12.1",
    "@vue/eslint-config-standard": "^4.0.0",
    "element-theme-chalk": "^2.15.6",
    "natives": "^1.1.6",
    "node-sass": "^4.14.1",
    "sass-loader": "^7.3.1",
    "style-loader": "^3.2.1",
    "vue-template-compiler": "^2.6.12"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "resolutions": {
    "@vue/cli-service/portfinder": "1.0.21"
  },
  "engines": {
    "node": ">= 8.11.1",
    "npm": ">= 5.6.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 10"
  ],
  "element-theme": {
    "config": "./src/element-ui/theme-variables.scss",
    "out": "./src/element-ui/theme",
    "minimize": true,
    "browsers": [
      "> 1%",
      "last 2 versions",
      "not ie <= 10"
    ]
  }
}