前端开发必备 —— NPM

Posted 2021-09-24 104828720

介绍

1. NPM是基于node.js开发的软件
2. NPM是node.js默认包管理工具，现代前端开发必备

检测 NPM 是否安装成功

npm -v

NPM 镜像

由于 NPM默认镜像 是在国外，所以下载速度很慢很不稳定，所以需要切换回国内的镜像（国内最出名的镜像是阿里的）

• 查看NPM当前镜像

npm config get registry

• 设置镜像

npm config set registry https://registry.npm.taobao.org

• [推荐] nrm镜像管理工具

// 安装
npm i nrm -g --registry=https://registry.npm.taobao.org

// 查看所有镜像以及当前使用的镜像
nrm ls

// 切换镜像
nrm use taobao

如何更新 NPM

// npm说到底也是一个普通的包
npm i npm -g

基本使用

• 安装

// 生产环境
npm i xxx
npm i xxx -S
npm i xxx@2.0.1 -S

// 开发环境
npm i xxx -D

注意:
1、可用于更新
2、不指定版本的话，就会只根据package.json文件的版本规则更新

• 卸载

// 卸载全局
npm uninstall xxx -g

// 卸载开发
npm uninstall xxx -D

// 卸载生产
npm uninstall xxx -S

• 更新

// 更新全局所有包
npm update -g 

// 更新全局某包
npm update -g xxx

// 更新本地所有包
npm update 

// 更新本地某包
npm update xxx

注意：
1、会根据package.json文件的版本规则更新

• 查看

// 查看全局某包
npm ls -g xxx

// 查看本地某包
npm ls xxx

// 查看当前项目所依赖的包
npm ls

package.json 详解（NPM配置文件）

package.json 字段详解

项目中如何使用 NPM 安装的包

npm 安装的包都存放在 node_moudules 文件夹中

• 引入方式

// node.js中，使用CommonJS模块规范引入
const $ = require(\'jquery\');

// webpack中，可以使用CommonJS或ES6模块化规范
import $ from \'jquery\';
const $ = require(\'jquery\');

注意：webpack强大到，CommonJS模块也可以使用ES6规范进行导入，ES6模块也可以使用CommonJS规范进行导入

• 引入路径

npm安装的包：只要引入包名就可以了（package.json中name）

非npm安装的包（自定义模块）：以当前文件为相对路径，./为当前文件夹，../为上一级文件夹

• 引入后缀

npm安装的包：无需后缀名，除非特殊说明

非npm安装的包（自定义模块）：

发布 NPM 包

1、在npm官网注册账号

2、登录
npm login

3、全局测试：把包链接到全局环境
npm link

4、取消全局测试：把包从全局环境中取消
npm unlink

5、本地项目测试：把包链接到项目本地环境
先把3执行完
cd 本地项目根目录
npm link 包名

6、取消本地项目测试：把包从本地环境取消
cd 本地项目根目录
npm unlink 包名

7、发布
cd 将要发布包内
npm publish

8、更新
npm version 1.0.1
npm version patch更新一个补丁
npm version minor更新一个小改动
npm version major更新一个大改动

npm publish

9、删除发布
npm unpublish 包名 --force