Npm是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题
- 包管理工具NPM
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
安装 NPM
由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入npm -v来测试是否成功安装。
命令如下，出现版本提示表示安装成功：
更新 NPM
npm i npm -g
淘宝镜像 cnpm
设置完成后，后续我们使用 npm 下载插件时就可以直接从淘宝的地址下载，比从外网下载更快。
查看当前npm镜像命令：npm config set registry https://registry.npmmirror.com
npm config get registry
项目的npm配置 package.json
- 那么对于一个项目来说，我们如何使用npm来管理这么多包呢？
- 事实上，我们每一个项目都会有一个对应的配置文件，无论是前端项目(Vue、React )还是后端项目( Node )
- 这个配置文件会记录着你项目的名称、版本号、项目描述等
- 也会记录着你项目所依赖的其他库的信息和依赖库的版本号
生成
方式一︰手动创建项目，npm init -y
在项目文件夹路径下，打开命令行工具（如windows 的CMD、PowerShell等），输入以下代码，会自动生成在该文件夹内
手动创建时，会询问你的项目信息 ``` This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.npm init #创建时填写信息npm init -y #所有信息使用默认的
See npm help json for definitive documentation on these fields
and exactly what they do.
Use npm install <pkg> --save afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
下面内容会询问你，你可以不断回车用默认的
name: (node_modules) test # 你的模块名 version: (1.0.0) # 你模块的版本号 description: Node.js 测试模块(www.runoob.com) # 描述 entry point: (index.js) # 主入口js test command: make test git repository: https://github.com/test/test.git # Github 地址 keywords: author: license: (ISC) About to write to ……/node_modules/package.json: # 生成地址
{ “name”: “test”, “version”: “1.0.0”, “description”: “Node.js 测试模块”, # 你模块的描述 …… }
Is this ok? (yes) yes # 是否完成
<a name="CPOuJ"></a>### 方式二︰通过脚手架创建项目脚手架会帮助我们生成package.json，并且里面有相关的配置，如webpack、Vue Cli、Vite等<a name="VvSuY"></a>## 属性说明生成的文件是json格式的，里面是类似一个对象<br />| **name** | 包名。 || --- | --- || **version ** | 包的版本号。 || **description** | 包的描述。 || **homepage** | 包的官网 url 。 || **author** | 包的作者姓名。 || **contributors** | 包的其他贡献者姓名。 || **license** | 开源协议，你如果想在GitHub等开源网站发布自己的代码，别人想使用你的代码，需要遵循什么协议，不同协议规定不一样。 || **private** | 这个项目是否私有的，如果是true，在发布到GitHub等平台时是发布不上去的 || **epository** | 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。 || **main** | main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。<br /> || **keywords** | 关键字，你想别人在npm官网输入什么可以搜索到你，这个就是关键字。 || **scripts** | 可以执行的脚本，左边的key ( 如例子里面的test )，可以通过npm run key 来执行（如 npm run test），相当于运行右边的value里面的内容。<br />这里可以你自己定制的，很多脚手架都会往这里加自己的命令<br /><br />（这是Vue Cli创建的，用的就是Vue Cli的一些命令）<br /> || **dependencies** | 依赖包（模块 / 依赖库）列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。<br /><br />只要是在src文件下里写代码用到的，都要放这里 || **devDependencies** | 只需要在开发写代码期间用到的库，比如Mock模拟数据、vite打包工具等，这些开发完后打包上线后，不需要用到。<br /> || **peerDependencies** | <br /><br />如果检测到你没有安装这里面要求的依赖，会有个提示<br /> || **engines** |  || **browserslist** |  |<a name="Ov7XA"></a>## 依赖版本管理会发现安装的依赖版本出现:个2.0.3或~2.0.3，这是什么意思呢?<br />- **npm的包通常需要遵从semver版本规范**- semver : [https://semver.org/lang/zh-CN/](https://semver.org/lang/zh-CN/)- npm semver : [https://docs.npmjs.com/misc/semver](https://docs.npmjs.com/misc/semver)- **semver版本规范是X.Y.Z**- X主版本号( major )：当你做了不兼容的API修改（可能不兼容之前的版本）- Y次版本号( minor )：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）- Z修订号( patch ) ：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug )<a name="HGvk3"></a>## 锁定版本而真实的版本，在lock这个文件里面，这个文件是执行npm install的时候自动生成的，然后锁定版本号，防止你和你同事开发的时候使用的版本不一致。<br />如果要更新依赖的版本，要删掉这个文件。<br /><br /><a name="HeZdZ"></a># 查找模块[https://www.npmjs.org/](https://www.npmjs.org/)<br />这是我们安装相关的npm包的官网，上面的包都可以通过npm工具安装<br /><a name="9BICk"></a># 安装模块<a name="YgUCl"></a>## 安装当前 所有模块npm 会根据当前项目文件夹中的 package.json 配置文件，中的依赖配置 dependencies 属性 和 devDependencies 属性，下载安装属性里面的所有模块和模块的依赖。```bashnpm install或npm i
全局安装 单个模块
npm i 模块名 -g或npm i 模块名 -global
全局默认安装位置：C:/Users/xxx/AppData/Roaming/npm
全局安装的优势在于，会把该模块的一些命令添加到环境变量里面，然后你在任何位置，打开命令行工具，都能直接使用这个库的命令。
平常不建议全局安装，因为你全局安装的版本，可能和你项目所使用的版本不一致，或者多个项目用不同的版本，从而导致一些问题。
因此你只有把这些模块当做工具使用，比如yarn，不会在你的src中用到的，才会全局安装。
局部安装 单个模块*
# 安装的包将写入package.json里面的dependencies，dependencies：生产环境需要依赖的库，如UI库（element-ui，ant-design-vue）npm i 模块名# 或npm i 模块名 --save# 或npm i 模块名 -S# 安装的包将写入packege.json里面的devDependencies，devdependencies：只有开发环境下需要依赖的库，如EsLint（规范代码格式）npm i 模块名 --save-dev# 或npm i 模块名 -D
局部安装位置，会安装在你项目的node_modules文件夹内，只有你项目里面能够引用使用，平常推荐这样操作
安装指定版本
npm i 模块名@版本号//如npm i vite@1.0.0-rc.13
查看安装信息
npm list -g
更新模块
npm update 模块名
卸载模块
npm uninstall 模块名
查看模块版本
npm info 模块名# 如npm info vite
其他命令
https://docs.npmjs.com/cli-documentation/cli
NPM安装原理 *
- 执行npm install它背后帮助我们完成了什么操作?
- 我们会发现还有一个成为package-lock.json的文件，它的作用是什么?
- 从npm5开始，npm支持缓存策略(来自yarn的压力），缓存有什么作用呢?
早期的npm5，没有缓存机制，也没有lock文件，假设你电脑上有3个项目，每个项目都安装Vue，那么每个项目都要从registry仓库下载一遍，相当于同样的代码重复下载了3遍，占用了服务器的带宽，浪费了时间，非常不好用，下载很慢而且容易出问题。
后来出现了yarn，就是为了解决npm这个问题，有逐渐取代npm的趋势。
查看缓存存放位置
npm get cache
清除缓存
npm cache clean --force
有时候偶尔缓存可能会被破坏，但是它仍然认为是有缓存的，导致后面一直有问题，此时可以清理缓存。
后面加 —force 是强制，不强制的话会提示你缓存是用于优化，不建议清理。
Npx工具
npx是npm5.2之后自带的一个命令。
npx的作用非常多，但是比较常见的是使用它来调用项目中的某个模块的指令。就是调用项目中，局部安装的某个模块里面的模块命令。
- 以webpack为例
- 全局安装的是webpack5.1.3
- 项目安装的是webpack3.6.0
- 如果我在终端执行webpack —version使用的是哪一个命令呢?
- 显示结果会是webpack 5.1.3，事实上使用的是全局的，为什么呢?
- 原因非常简单，在当前目录下找不到webpack时，就会去全局找，并且执行命令;
那么如何使用项目（局部）的webpack，常见的是两种方式
- 方式一：明确查找到node_module下面的webpack
- 在终端中使用如下命令(在项目根目录下)
./node_modules/ .bin/webpack --version
- 在终端中使用如下命令(在项目根目录下)
方式二：在scripts定义脚本，来执行webpack
- 修改package.json中的scripts
相当于运行 npm run webpack，用的也是局部模块的"scripts": {"webpack" : "webpack --version"}
- 修改package.json中的scripts
方式三︰使用npx
npx webpack --version- npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令
- 方式一：明确查找到node_module下面的webpack
若有收获，就点个赞吧
0 人点赞
