npm是JavaScript运行时环境Node.js的默认包管理器。

1. 前提

前端技术（核心）

(1)、技术发展：从html,css,javascript（BOM,DOM）到 html5,css3,ES5；

(2)、框架发展：从jQuery,BootStrap发展(2016年)到Vue,React,WebApp,小程序等；

(3)、NodeJS技术：默认安装npm包管理器，官网：https://node.js.org；

(4)、npm包管理工具：管理包的依赖关系，官网：https://npmjs.org；

(5)、WebPack打包技术，Vite打包等；

(6)、ES6的语法（其他的版本变更都不大，但是ES5到ES6的语法变更很大）；

(7)、异步请求：axios。

认识NPM

npm：Node Package Manager-Node包管理器。

管理依赖关系。

NodeJS环境默认安装。

安装NPM

直接安装nodejs，就安装了npm。

 # npm版本号
 npm -v

 # node版本号
 node -v

# 更新npm
 npm install npm@latest -g

# 配置私有仓库镜像(配置淘宝)
 npm config set registry https://registry.npmmirror.com

# 查看配置
 npm config get registry

2. 相关命令

 # 初始化项目（包）
 npm init

 # 初始化 -y 按默认不进行询问(-y等价--yes)
 npm init -y
 
# 实际是生成一个package.json文件。
 # scripts内可以放置一些自定义的脚本。
 
 # 查看全局安装包 -g代表全局，后可跟具体的包名，单独查看指定包
 npm list -g
 npm list -g jquery

 # 查看本地安装包
 npm list
 npm list jquery
 
 #全局安装包 -g代表全局
 npm install jquery -g
 
# 本地安装包 install可简写i（默认安装到运行时）
 npm install jquery
 npm i jquery
 npm install jquery --save #--save和-S以及不写等价
 npm install jquery -S

# 本地安装，开发依赖
 npm install jquery --save-dev #--save-dev和-D等价
 npm install jquery -D
 
 # 可通过包名后，增加@版本号，限定安装版本号，默认最新版本号
 npm install jquery@3.0.0
 npm install jquery@3.0.0 --save-dev

# 更新安装包(-g 全局更新，否则本地)
 npm update jquery
 npm update jquery -g

#卸载包(-g 全局卸载，否则本地)
 npm uninstall jquery
 npm uninstall jquery -g

3. package.json文件说明

 {
   "name": "demo",
   "version": "1.0.0",
   "description": "",
   #入口文件
   "main": "index.js",
   #所有的命令，可以通过npm run test方式执行。  
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   #运行时依赖，上线时会携带。
   "dependencies": {
     "vue": "^2.6.14"
   },
   #开发依赖，上线时不会携带该模块
   "devDependencies": {
     "jquery": "^3.6.0"
   }
 }

 #如果没有node_modules，可以通过以下命令按照配置文件直接安装，拉取包。
 npm install

依赖版本号的的说明：

• ^2.6.14:规定2.x.x版本，安装时会使用2.x.x的最新版本。
• ~2.6.14：规定2.6.x版本，安装时会使用2.6.x的最新版本。
• 2.6.14：固定版本号，只会安装2.6.14版本。

4. 包的使用

发展：

• 最开始，直接手工定位包内容，然后加入html文件中（很不方便），例如：<script src="./node_modules/jquery/dist/jquery.min.js"></script>。
• CommonJS模块系统：会自动检索node_modules文件夹的模块。
• 使用require语句导入包:const $ = require("jquery");
• ES6语法：import导入包:import $ from "jquery";
• WebPack/Vite等打包工具。

5. npx的简单使用

npx的x可以理解为eXecute。

当执行npx xxx的时候，npx先看xxx在$PATH(环境变量)里有没有，如果没有，找当前目录的node_modules里有没有，如果还是没有，就安装这个xxx来执行。

npx也可以理解为少写package.json里一个script而诞生的。

例如：对于安装了typescript的工程，可以直接：

 npx tsc -v