【Web前端开发】npm你真的会用吗？

静心悦纳
169 阅读6分钟

“技术改变世界，代码改变未来”

大家好，我是静心悦纳。

npm是一款JavaScript包管理器（JavaScript Package Manager）,同类的工具还有yarn。

npm是一个客户端工具，它需要在客户端安装并执行，但需要软件包注册管理服务的支持。

使用npm首先我们需要知道怎么安装。实际上，安装npm只需要安装NodeJs就可以，NodeJs的安装包中已经包含了npm工具。关于NodeJs的安装也很简单。只需要从NodeJs网站下载相应操作系统的安装包，执行并按提示安装即可。安装完成后，你就可以使用npm命令了。值得一提的是，我们在选择NodeJs版本的时候 ，如果没有特殊的要求，尽量选择成熟的稳定版本和长期维护版本。

首先，让我们先查看一下npm的版本。

$ npm -v
8.19.1

通过npm工具，也可以创建一个NodeJs项目。

$ mkdir demo
$ cd demo 
$ npm init   
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (demo) 
version: (1.0.0) 
description: this is a demo project
entry point: (index.js) 
test command: 
git repository: 
keywords: demo
author: jinxinyuena
license: (ISC) MIT
About to write to /Users/popgis/tmp/npm/demo/package.json:

{
  "name": "demo",
  "version": "1.0.0",
  "description": "this is a demo project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "demo"
  ],
  "author": "jinxinyuena",
  "license": "MIT"
}


Is this OK? (yes) 
npm notice 
npm notice New patch version of npm available! 8.19.1 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g npm@8.

执行npm init后，按照提示逐步执行，这样我们就创建了一个NodeJs的demo工程。 在demo目录下还生成了一个package.json文件，其内容如下所示：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "this is a demo project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "demo"
  ],
  "author": "jinxinyuena",
  "license": "MIT"
}

有了package.json只是有了一个项目基本配置，此时你可以使用npm命令安装并使用第三方的依赖包。即使用npm install命令进行安装。如，可以通过inquirer创建一个交互式的命令行工具。

安装或反安装依赖库

接下来，我们就可以安装依赖库了，下面我就以inquirer依赖库为例，介绍npm包的安装方法。

npm install --save inquirer

执行上述命令后，package.json文件中就多出了如下行：

  "dependencies": {
    "inquirer": "^9.1.1"
  }

安装命令的install也可以替换为以下关键字：

add, i, in, ins, inst, insta, instal, isnt, isnta, isntal, isntall

例如，上述命令可以简化为：

npm i --save inquirer

--save意思是将依赖包的信息保存于package.json配置文件中，它是一个默认选项，通常情况下是不需要输入的。

{
  "name": "demo",
  "version": "1.0.0",
  "description": "this is a demo project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "demo"
  ],
  "author": "jinxinyuena",
  "license": "MIT",
  "dependencies": {
    "inquirer": "^9.1.1"
  }
}

其中，以下内容是新增的保存内容：

 "dependencies": {
    "inquirer": "^9.1.1"
  }

inquirer依赖包被加在了dependencies中，需要注意的是dependencies中的依赖包在运行时需要的库，但如果只是在编译时需要的依赖库，如，webpack等，则不需要加在dependencies中，你需要将其加入到devDependencies中，方法就是只需要将--save参数改为--save-dev即可。

 $ npm i --save-dev webpack
added 76 packages in 3s

当执行完成npm install之后，在package.json同级目录下会多出一个文件夹node_modules，还有一个package-lock.json文件。

$ tree -L 1
.
├── node_modules
├── package-lock.json
└── package.json

1 directory, 2 files

node_modules目录下放置的是所有的依赖库。package-lock.json是自动生成的，你不应当手工去编辑它，它是用来详细、准确记录依赖库信息、依赖版本、依赖顺序等的文件。

为了保证依赖库资源的稳定性，你应该将package-lock.json连同package.json一并提交至代码仓库中。有了package.json与package-lock.json，你不需要把node_moduels目录及其下文件提交至代码仓库。

如果想要反安装依赖库，则可以使用npm uninstall命令。如，反安装inquirer，则可以按如下方法执行：

$ npm uninstall inquirer
removed 47 packages in 1s

执行上述命令后，inquirer依赖库会被从package.json文件中移除，当然，也会被从node_moduels目录下移除。

下面的几条命令是与前面的命令执行效果是相同的：

npm un inquirer
npm r inquirer
npm remove inquirer
npm unlink inquirer

查看npm项目中有哪些依赖库

安装完依赖包以后，你可以还想查看一下当前项目中还依赖了哪些库，则可以通过npm list来查看。

$ npm list
demo@2.0.0 /Users/popgis/tmp/npm/demo
├── inquirer@9.1.1
└── webpack@5.74.0

list命令可以简写为ls。

$ npm ls
demo@2.0.0 /Users/popgis/tmp/npm/demo
├── inquirer@9.1.1
└── webpack@5.74.0

使用npm管理与配置项目版本

你可能已经注意到了在package.json文件中包含以下信息：

"version": "1.0.0",

1.0.0就是当前项目的版本号。 我们知道，一般一个软件的版本号主要分为三段：

  1. 主版本号
  2. 次版本号
  3. 补丁版本号

当你为项目增加了新的主功能或进行了重大代码重构后，一般你需要增加主版本号（major），当你只是增加了次要功能或是小范围的重构，一般需要升级是次版本号（minor），如果只是修改了一些Bug或添加了补丁，则一般只需要升级补丁版本（patch）。

执行如下命令，可以升级次版本：

$ npm version minor
v1.1.0

同样地，执行如下版本可以升级补丁版本：

 $ npm version patch
v1.1.1

类似地，执行如下命令，可以升级主版本：

npm version major
v2.0.0

如果npm version后什么都不加，则可以列出所有直接依赖或间接依赖的库及其版本号。

$ npm version
{
  demo: '2.0.0',
  npm: '8.19.1',
  node: '16.13.0',
  v8: '9.4.146.19-node.13',
  uv: '1.42.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.2',
  modules: '93',
  nghttp2: '1.45.1',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '1.1.1l+quic',
  cldr: '39.0',
  icu: '69.1',
  tz: '2021a',
  unicode: '13.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

还有哪些命令可用？

除了init、install、uninstall、ll、version外，npm命令还有很多，以下是所有的命令列表：

  • npm access 设置发布包的访问级别
  • npm adduser 增加一个注册用户帐号
  • npm audit 执行安全检查
  • npm bin 显示npm的bin文件夹
  • npm bugs 在Web浏览器中显示包的Bug报告，如，npm bugs webpack
  • npm cache 操作npm包缓存
  • npm ci 清理安装一个项目，常常用于测试平台、持续集成与生产环境部署时
  • npm completion 使能npm自动完成功能
  • npm config 通过命令管理npm配置文件（package.json）
  • npm dedupe 减少包树中的重复依赖
  • npm deprecate 废弃包的版本
  • npm diff 比较包的差异
  • npm dist-tag 修改包的分发标签
  • npm docs 在Web浏览器中打开包的文档，如，npm docs webpack
  • npm doctor 检查npm环境
  • npm edit 编辑安装的包
  • npm exec 从本地或远程npm包运行一个命令
  • npm explain 解释已安装的包
  • npm explore 浏览已安装的包
  • npm find-dupes 在包依赖树中查找重复的包
  • npm fund 获取从哪儿找包的信息
  • npm get 获取配置信息
  • npm help 查看命令帮助信息
  • npm hook 管理注册钩子，包含add、ls、rm、update等子命令
  • npm init 创建package.json文件
  • npm install 安装包
  • npm install-ci-test 运行npm ci后，立即运行npm test
  • npm install-test 安装包并运行测试
  • npm link 符号链接包文件夹，多用于本地调试
  • npm ll 列示已安装的包，包含描述信息等
  • npm login 增加一个注册用户帐号，同npm adduser
  • npm logout 退出登录
  • npm ls 查已安装的包列表，同npm list
  • npm org 管理组织
  • npm outdated 检查过期的包
  • npm owner 管理包的属主，包含add、rm、ls子命令
  • npm pack 创建压缩包
  • npm ping 检查注册器是否可用
  • npm pkg 管理package.json文件，包含set、get、delete等子命令
  • npm prefix 显示本地路径前缀
  • npm profile 修改注册身份信息，包含get、set、enable-2fa、disable-2fa等子命令
  • npm prune 移除多余的包
  • npm publish 发布包
  • npm query 通过选择器过滤查询依赖
  • npm rebuild 重建包
  • npm repo 在浏览器中打开包库页面
  • npm restart 重启项目
  • npm root 显示npm包根目录
  • npm run-script 运行scripts中的任意脚本
  • npm search 搜索包，同find, s, se
  • npm set 修改npm配置
  • npm set-script 在package.json的scripts节中设置任务
  • npm shrinkwrap 锁定发布的依赖项版本
  • npm star 标记喜欢的包
  • npm stars 查看喜欢的包
  • npm start 启动项目
  • npm stop 停止项目
  • npm team 管理团队和成员
  • npm test 测试包
  • npm token 管理授权令牌
  • npm uninstall 卸载包
  • npm unpublish 从注册器移除发布的包
  • npm unstar 从喜欢的包中移除一项
  • npm update 升级包
  • npm version 升级或更新包版本
  • npm view 查看项目对应的注册器信息
  • npm whoami 显示npm用户

不会可以直接寻求帮助

就像Linux系统的man命令一样，你可以通过npm的help子命令，查询相应子命令的帮助。 比如，想要看一下diff命令是做什么的，或者想要知道如何使用diff，则可以使用如下命令查看。

$ npm help diff

进入到帮助文档浏览模式后，可以通过键盘上的向下键或者回车键逐行向下滚动浏览。 如果想要翻动一整页，则可以使用PageDown键，同样地，想要向上翻页使用PageUp键。 如果想要在当前打开的帮助文档中查找某关键字，则可以先输入/，紧随其后再输入要查找的关键字后回车即可。 如果想要退出文档浏览，在普通模式下敲击q键则可退出。

help子命令不仅可以查看子命令的帮助文档，还可以查看package.json、npmrc等的帮助。

$ npm help package.json

$ npm help npmrc
avatar
文章
阅读
粉丝