介绍

https://www.runoob.com/nodejs/nodejs-npm.html

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题

image.png

使用场景

1、允许用户从NPM服务器下载别人编写的第三方包到本地使用。

2、允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

3、允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

======================

安装 NPM

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。

命令如下，出现版本提示表示安装成功:
image.png

查看npm 版本

image.png

更新 NPM

  1. npm install npm -g

image.png

淘宝镜像 cnpm

https://www.yuque.com/yejielin/mypn47/slciqn

项目的npm配置 package.json

image.png

生成

image.png
在项目文件夹路径下，打开命令行工具（如windows 的CMD、PowerShell等），输入以下代码，会自动生成在该文件夹内
image.png
手动创建时，会询问你的项目信息

  1. This utility will walk you through creating a package.json file.
  2. It only covers the most common items, and tries to guess sensible defaults.
  4. See `npm help json` for definitive documentation on these fields
  5. and exactly what they do.
  7. Use `npm install <pkg> --save` afterwards to install a package and
  8. save it as a dependency in the package.json file.
  10. Press ^C at any time to quit.
  12. #下面内容会询问你，你可以不断回车用默认的
  13. name: (node_modules) test                   # 你的模块名
  14. version: (1.0.0)                  # 你模块的版本号
  15. description: Node.js 测试模块(www.runoob.com)  # 描述
  16. entry point: (index.js)      # 主入口js
  17. test command: make test
  18. git repository: https://github.com/test/test.git  # Github 地址
  19. keywords: 
  20. author: 
  21. license: (ISC) 
  22. About to write to ……/node_modules/package.json:      # 生成地址
  24. {
  25.   "name": "test",
  26.   "version": "1.0.0",
  27.   "description": "Node.js 测试模块",     # 你模块的描述
  28.   ……
  29. }
  32. Is this ok? (yes) yes   # 是否完成

image.png
如webpack、Vue Cli、Vite等

属性说明

生成的文件是json格式的，里面是类似一个对象
image.png

name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
license - 开源协议，你如果想在GitHub等开源网站发布自己的代码，别人想使用你的代码，需要遵循什么协议，不同协议规定不一样

private - 这个项目是否私有的，如果是true，你发布到GitHub等平台是发布不上去的，防止你手贱把公司私有的项目发布出去。

repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。

main - main 字段指定了程序的主入口文件，require(‘moduleName’) 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
image.png

keywords - 关键字，你想别人在npm官网输入什么可以搜索到你，这个就是关键字。

scripts - 可以执行的脚本，左边的key ( 如例子里面的test )，可以通过npm run key 来执行（如 npm run test），相当于运行右边的value里面的内容。
这个可以你自己定制的，很多脚手架都会往这里加自己的命令
image.png（这是Vue Cli创建的，用的就是Vue Cli的一些命令）
image.png

dependencies - 依赖包（模块 / 依赖库）列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
image.png
只要你在src写代码用到的，都要放这里

devDependencies - 只需要在开发写代码期间用到的库，比如Mock模拟数据、vite打包工具等，这些开发完后打包上线后，不需要用到
image.png

peerDependencies -
image.png
image.png
如果检测到你没有安装这里面要求的依赖，会有个提示
image.png

engines -
image.png

browserslist -
image.png

依赖版本管理

image.png
image.png
image.png
image.png
image.png

锁定版本

而真实的版本，在lock这个文件里面，这个文件是执行npm install的时候自动生成的，然后锁定版本号，防止你和你同事开发的时候使用的版本不一致。
如果要更新依赖的版本，要删掉这个文件。
image.png
image.png

======================

查找模块

https://www.npmjs.org/
这是我们安装相关的npm包的官网，上面的包都可以通过npm工具安装
image.png

安装模块

安装当前 所有模块

npm 会根据当前项目文件夹中的 package.json 配置文件，中的依赖配置 dependencies 属性 和 devDependencies 属性，下载安装属性里面的所有模块和模块的依赖。

  1. npm install
  2. 或
  3. npm i

全局安装 单个模块

  1. npm install 模块名 -g
  2. 或
  3. npm install 模块名 -global

全局默认安装位置：C:/Users/xxx/AppData/Roaming/npm

全局安装的优势在于，会把该模块的一些命令添加到环境变量里面，然后你在任何位置，打开命令行工具，都能直接使用这个库的命令。

平常不建议全局安装，因为你全局安装的版本，可能和你项目所使用的版本不一致，或者多个项目用不同的版本，从而导致一些问题。

因此你只有把这些模块当做工具使用，比如yarn，不会在你的src中用到的，才会全局安装。

局部安装 单个模块*

  1. # 安装的包将写入package.json里面的dependencies，dependencies：生产环境需要依赖的库，如UI库（element-ui，ant-design-vue）
  2. npm install 模块名
  3. # 或
  4. npm install 模块名 --save
  5. # 或
  6. npm install 模块名 -S
  9. # 安装的包将写入packege.json里面的devDependencies，devdependencies：只有开发环境下需要依赖的库，如EsLint（规范代码格式）
  10. npm install 模块名 --save-dev
  11. # 或
  12. npm install 模块名 -D

局部安装位置，会安装在你项目的node_modules文件夹内，只有你项目里面能够引用使用，平常推荐这样操作

安装指定版本

  1. npm install 模块名@版本号
  2. //如npm install vite@1.0.0-rc.13

查看安装信息

  1. npm list -g

更新模块

  1. npm update 模块名

卸载模块

  1. npm uninstall 模块名

查看模块版本

  1. npm info 模块名
  2. # 如npm info vite

其他命令

https://docs.npmjs.com/cli-documentation/cli

=====================

NPM安装原理 *

image.png

早期的npm5，没有缓存机制，也没有lock文件，假设你电脑上有3个项目，每个项目都安装Vue，那么每个项目都要从registry仓库下载一遍，相当于同样的代码重复下载了3遍，占用了服务器的带宽，浪费了时间，非常不好用，下载很慢而且容易出问题。

后来出现了yarn，就是为了解决npm这个问题，有逐渐取代npm的趋势。

后来npm自己不断更新，现在和yarn差不多了
image.png

查看缓存存放位置

  1. npm get cache

image.png
image.png image.png

清除缓存

  1. npm cache clean --force

有时候偶尔缓存可能会被破坏，但是它仍然认为是有缓存的，导致后面一直有问题，此时可以清理缓存。

后面加 —force 是强制，不强制的话会提示你缓存是用于优化，不建议清理。

=====================

Npx工具

image.png
就是调用项目中，局部安装的某个模块里面的模块命令。

image.png
image.png
image.png
image.png
相当于运行 npm run webpack，用的也是局部模块的

image.png
image.png

=====================

创建自己的npm包

发布

image.png

image.png image.png

初始化项目，创建package.json，编写代码，默认入口是index.js
image.png

image.png
image.png

image.png
发布后可以看到你的包的信息，而且可以在npm官网上搜到
image.png

更新

image.png
image.png（不修改，发布时会被服务器拒绝）

过期

image.png
过期后，别人安装和使用的时候，会有提示说已过期

删除

image.png