网站的要求部门网站建设管理制度

前端工具及插件库
专栏收录该内容
24 篇文章1 订阅
订阅专栏
npm
一、安装配置
二、初始化配置文件
package.json
package.lock.json
二、下载模块
2.1、下载指令
2.2、清理缓存
2.3、模块信息
2.4、npm i 与 npm ci 区别
三、其他指令
第三方模块是别人写好的一些文件，我们要使用这些文件，就需要下载。
node 提供了一个工具，叫做 npm，专门用来管理这些模块。
npm 除了可以管理第三方模块，还可以管理一些框架、插件和库。
所以 npm 叫做包管理器，我们将模块、插件、库统称为包。

一、安装配置
安装 node.js 之后自带 npm，无需单独安装
测试工具：在命令行输入 npm -v 能有个版本号，就说明工具能用

如果要更新npm，可以使用如下命令
npm install npm -g

有些公司有自己内部的镜像源，在配置镜像源这块可以先看看公司有没有指定，一般情况下使用的是淘宝镜像源。

查询当前镜像：
npm get registry 

设置为淘宝镜像（推荐）
npm config set registry http://registry.npm.taobao.org/

设置回默认的官方镜像
npm config set registry https://registry.npmjs.org/

二、初始化配置文件
通常一个项目中会使用到很多的包、库、模块、插件等等，这样使得node_modules这个文件夹会很大，如果要上线了或者要放到别的地方运行，直接将这个文件夹复制的话，会很大不方便。
解决这个问题，可以使package.json。在这个文件中可以将项目依赖的包的信息，写进去，以后别人拿到这个文件就能知道，这个项目下载了哪些依赖的包。
简单的来说就是，上传项目时，不要把node_modules上传上去，而是根据上传的package.json重新下载一遍所需要的包
package.json：用来存储你下载的模块信息
package.json
创建package.json文件
# 需要根据提示手动输入项目的信息
npm init

# 使用默认值创建，不用根据提示手动输入项目的信息，但是当前文件夹名不能是中文
npm init -y
 
 
然后我们可以将所需要的模块和依赖都被写入package.json文件中的dependencies对象，配置安装所有的依赖包
比如你要安装react插件，直接写在里面就行
前面是模块名，后面是版本号，按对象格式书写
最后一键安装所有依赖：npm install，简写就是：npm i

package.lock.json
我们在安装包时，可以看到它的版本依赖，默认是兼容大版本即可。
此时会出现一个问题，就是在不同的用户电脑中，初始化的包的版本可能会出现不一样的情况，从而造成未可知的bug。
为了解决这个问题（这也是yarn诞生的一个原因），npm在5.0之后引入了package.lock.json文件，用来固定包的版本、包的源地址等信息，保证在不同的用户开发环境中加载的是相同的包。
当用户使用npm install命令来安装我们的依赖项时，会从package.lock.json文件中进行安装。
二、下载模块
下载包时，会自动创建node_modules和package.json文件，但是我们也可以先创建和配置好所要下载的包，然后别人拿到这个文件，只需要执行npm i命令，就可以将项目依赖的包，都一键下载下来

{
  "name": "03-npm",  //描述了包的名字，不能有中文
  "version": "1.0.0",  //描述了包的的版本信息， x.y.z  如果只是修复bug，需要更新Z位。如果是新增了功能，但是向下兼容，需要更新Y位。如果有大变动，向下不兼容，需要更新X位。
  "description": "", //包的描述信息
  "main": "index.js", //入口文件（模块化加载规则的时候详细的讲）
  "scripts": {  //配置一些脚本，在vue的时候会用到，现在体会不到
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],  //关键字（方便搜索）
  "author": "",  //作者的信息
  "license": "ISC",  //许可证，开源协议
  "dependencies": {   //重要，项目的依赖， 方便代码的共享  通过 npm install可以直接安装所有的依赖项
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1"
  }
}

2.1、下载指令
本地安装：将安装包放在 ./node_modules 下
# 只能在当前文件夹使用
npm install 模块名称
# 简写：
npm i 模块名称
# 示例：
npm install antd

全局安装：将安装包放在 /usr/local 下或者你 node 的安装目录
# 可以在任意文件夹使用
npm install --global 模块名称
# 简写：
npm i -g 模块名称
# 示例：
npm install --global antd

下载指定版本：(npm 默认下载的是最新版本)
# 下载指定的版本
npm i 模块名称@版本
# 示例：
npm install bootstrap@3.3.7

下载多个包
# 可以同时下载多个包，多个包名中间用空格隔开
npm i  bootstrap jquery
1
2
指定源安装包
# 安装所有包
npm install --registry=https://registry.npm.taobao.org

# 安装单个包
npm install -g cnpm --registry=https://registry.npm.taobao.org

2.2、清理缓存
有的时候，有些包下载到一半，因为各种原因失败了（比如突然没有网了）
那么这个下载了一半的包 有可能 会被缓存下来
那么以后你再次下载的时候，就都是失败的状态
那么我们就要清除掉缓存以后，在重新下载
或者在执行完命令再删除缓存文件夹
# 清理缓存
npm cache verify
# 强制清理（简写：npm cache clean -f）
npm cache clean --force

2.3、模块信息
将安装包信息保持到项目的 package.json 文件，很重要，最好每个项目所需的模块都加上这个指令，一般用的是 -S

--save或-S：生产阶段的依赖
将加入安装包信息到package.json文件dependencies对象中
npm install gulp --save 
或 
npm install gulp -S
 
--save-dev或-D ：开发阶段的依赖
将加入安装包信息到package.json文件devDependencies对象中
npm install gulp --save-dev 
或 
npm install gulp -D
 
--save-optional或-O ：可选阶段的依赖
将加入安装包信息到package.json文件optionalDependencies对象中
npm install gulp --save-optional 
或 
npm install gulp -O
 
 
2.4、npm i 与 npm ci 区别
npm i

npm i 将安装所有 package.json 中的依赖。
如果使用^或 ~ 标识依赖的版本，npm i 将精准安装所标识的版本。
npm i 会更新 package-lock.json 文件。
适用场景：安装新依赖或者升级已有依赖。

npm ci

npm ci 会先删除 node_modules 文件夹以确保干净的环境。
npm ci 会依照 package-lock.json 里的依赖版本精准安装。
npm ci 不会更改 package.json 或是 package-locks 文件，整个安装过程是锁死的
npm ci 强依赖于 package-lock.json，如果 package-lock.json 不存在，npm ci 将不会工作。
适用场景：

在 CI/CD 场景中使用 npm ci 更为合适，一方面，由于 npm ci 依赖于 package-lock.json，依赖版本确保一致，不会出现线上版本和开发版本不一致而引发的问题；
另一方面，首次安装时，使用npm ci将比 npm i 更加迅速，原因是由于 package-lock.json 的存在，不需要做依赖的版本检查以及梳理各依赖之间的关系。

三、其他指令
卸载模块：npm uninstall 模块名
如：npm uninstall jquery
更新模块：npm update 模块名
如：npm update jquery
检查模块：npm outdated
此命令会列出所有已经过时的包
查看模块：npm ls
查看所有安装的模块及依赖
启动模块：npm start
停止模块：npm stop
重启模块：npm restart
测试模块：npm test
查看版本：npm version