学习笔记—npm的介绍与使用

2023-11-16 13:22:16

日常的学习笔记，包括 ES6、Promise、Node.js、Webpack、http 原理、Vue全家桶，后续可能还会继续更新 Typescript、Vue3 和常见的面试题等等。

npm的介绍与使用

官方网站 https://www.npmjs.com/

npm 全称 node package manager ，是 nodejs 的包管理器，用于 node 插件管理，包括安装、卸载、管理依赖等。

常用命令与配置

这里我们只总结一些平时工作中会经常用到的命令和配置。

npm init

默认安装一个 package.json 的文件，直接使用 npm init -y 进行安装。

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

我们来介绍几个重要字段。

name ：当前包的名字，也就是最终发布到 npm官网上包的名字，不能和已有的包重名。
version: 当前包的 版本号 。
main：当前包的 入口文件 ，也就是使用 require 默认引入的文件。
scripts：可以配置一些 执行脚本 ，如 测试脚本 等。
license：协议许可。

npm install

npm install 安装指定的包，简写为 npm i 。后面可以添加 依赖关系。

安装方式分为 全局安装 和 本地安装。

全局安装
```
# 安装一个全局 http 服务。
npm install http-server -g
```
全局安装 的意思很简单，就是安装的模块会被安装到全局下。

可以在命令行中直接使用安装的包，其实只是在 /user/local/bin 目录下做了个链接连接到 /usr/local/lib/node_modules/http-server/bin/http-server 这个文件下。

当我们执行 http-server 这个命令时，会调用链接到这个文件。（mac因为有权限问题，这里我们可以加 sudo 来执行命令）

关于此部分的使用，可以参考我的博客 node中第三方模块。

我们可以自己来尝试写一个包，创建bin目录，新增www文件。随便起一个名字。
```
// #! 表示采用node来执行此文件，同理 shell可以表示 sh
#! /usr/bin/env node
console.log('莫小尚'); 
```
更新 package.json 文件
```
"bin": {
	"my-pack":"./bin/www" // 这里要注意名字和你建立的文件夹相同
},
```
再用一个常用的命令实现链接的功能。
```
npm link
```
这样我们在命令行中直接输入 my-pack 就可以打印出结果。
本地安装
```
npm install webpack --save-dev
```
本地安装 就是在项目中使用，而非在命令行中使用。

执行上述命令，可以生成一个 package-lock.json 文件。

安装后的模块被安装到了 node_modules 下，并且在 package.json 中也增加了一些内容。
```
"devDependencies": {
    "webpack": "^4.39.3"
}
```
我们可以通过添加后缀，指定版本号来安装包。
```
npm i jquery@2.2.0
```
（默认执行 npm i会安装项目中所需要的依赖，如果只想安装生产环境依赖可以增加 --production参数）

下面我们来介绍一下 package-lock 文件。

package-lock 文件

package-lock.json 的作用是 锁定依赖安装结构 ，保证在任意机器上执行 npm install 都会得到完全相同的 node_modules ，因为package-lock.json 存储所有安装的信息。

{
  "name": "my-pack",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
  "@webassemblyjs/ast": { 
      "version": "1.8.5", // 当前依赖的版本
      "resolved": "https://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.8.5.tgz", // 从哪个渠道安装的
      "integrity": "sha1-UbHF/mV2o0lTv0slPfnw1JDZ41k=", // 内容hash
      "dev": true,
      "requires": {
      "@webassemblyjs/helper-module-context": "1.8.5",
      "@webassemblyjs/helper-wasm-bytecode": "1.8.5",
      "@webassemblyjs/wast-parser": "1.8.5"
      }
  },
}
// ...

（如果手动更新了 package.json文件，执行安装命令会下载对应的新版本，并且会自动更新 package-lock 文件）

scripts配置

在 package.json 中可以定义自己的脚本通过 npm run 来执行。

"scripts": {
   "hello": "echo hello",
   "build": "webpack"
}

我们可以使用 npm run hello 执行自定义脚本，也可以使用 npm run build 执行node_modules/.bin 目录下的 webpack文件。

npm run 命令执行时，会把 ./node_modules/.bin/ 目录添加到执行环境的 PATH 变量中。因此如果某个 命令行包 未全局安装，而只安装在了当前项目的 node_modules 中，通过 npm run 一样可以执行该命令。
执行 npm脚本 时要传入参数，需要在命令后加 -- 标明。如 npm run hello -- --port 3000 可以将 --port 参数传给hello 命令。
npm 提供了 pre 和 post 两种钩子机制。可以定义某个脚本前后的执行脚本，没有定义默认会忽略。
```
"scripts": {
   "prehello":"echo prehello",
   "hello": "echo hello",
   "posthello":"echo posthello"
}
```

（通过打印全局 env 和在项目下执行 npm run env来对比PATH属性，不难发现在执行 npm run 的时候确实会将 ./node_modules/.bin/ 目录添加到PATH 中）

依赖关系

依赖关系分为以下几种：

开发依赖 devDependencies ，开发时使用的依赖，上线时就不需要了。如 webpack 、 gulp 等。
生产依赖 dependencies ，开发时会用，上线的时候也需要。如 vue 等。
同等依赖 peerDependencies ，安装某个库时，提示需要用到的其他依赖。如 安装bootstrap ，则需要用到依赖 jQuery 。
可选依赖 optionalDependencies ，如果有一些依赖包即使安装失败，项目仍然能够运行或者希望npm继续运行。
打包依赖 (捆绑依赖) bundledDependencies ，将这个对象中的包打包到最终的发布包里，就是将节点内的包压缩到一个压缩包中。

开发中用的最多的就是 开发依赖 、 生产依赖 和 同等依赖。

开发依赖和生产依赖

开发依赖，开发环境所需要的依赖。同理，生产依赖，就是 生产环境所需要的依赖。

--save：将保存配置信息到 package.json，默认为 dependencies 节点中。
--save-dev：默认为 devDependencies 节点中。

在实际开发中，我们 不填写任何标识，则会默认安装到 生产环境 中。

假设我们需要安装到 开发环境 ，则填写标识 --save-dev 即可。

如果我们现在有一个 github 上克隆的开源项目，我们需要安装当前项目所需要的插件和各种依赖。

直接使用命令 npm install ，就会将上述两个节点下的依赖全部加载到 node_modules 下。

假设我们现在只需要 生产依赖 ，则在后面加上节点 production 即可。 npm install --production

同等依赖

同等依赖，就是节点 peerDependencies 。

在安装时会提示我们需要用到的 同等依赖包 有哪些，起到一个提示的作用。

版本管理

参考文献 semver | npm中文文档

npm采用了 semver规范 作为依赖版本管理方案，semver 约定一个包的版本号必须包含3个数字。

MAJOR.MINOR.PATCH 意思是 主版本号.小版本号.修订版本号 。

MAJOR 对应大的版本号迭代，做了不兼容旧版的修改时要更新 MAJOR 版本号。
MINOR 对应小版本迭代，发生兼容旧版API的修改或功能更新时，更新 MINOR 版本号。
PATCH 对应修订版本号，一般针对修复 BUG 的版本号。

当我们每次发布包的时候都需要升级版本号。

npm version major  # 大版本号加 1，其余版本号归 0
npm version minor  # 小版本号加 1，修订号归 0
npm version patch  # 修订号加 1

如果使用 git 管理项目会自动 git tag 标注版本号。

标识含义

range	含义	例
`^2.2.1`	指定的 MAJOR 版本号下, 所有更新的版本	匹配 `2.2.3`, `2.3.0`; 不匹配 `1.0.3`, `3.0.1`
`~2.2.1`	指定 MAJOR.MINOR 版本号下，所有更新的版本	匹配 `2.2.3`, `2.2.9` ; 不匹配 `2.3.0`, `2.4.5`
`>=2.1`	版本号大于或等于 `2.1.0`	匹配 `2.1.2`, `3.1`
`<=2.2`	版本号小于或等于 `2.2`	匹配 `1.0.0`, `2.2.1`, `2.2.11`
`1.0.0 - 2.0.0`	版本号从 1.0.0 (含) 到 2.0.0 (含)	匹配 `1.0.0`, `1.3.4`, `2.0.0`

预发版

alpha (α)：预览版，或者叫 内部测试版；一般不向外部发布，会有很多bug；一般只有测试人员使用。
beta (β)：测试版，或者叫 公开测试版；这个阶段的版本会一直加入新的功能；在alpha版之后推出。
rc (release candidate)：最终测试版；可能成为最终产品的候选版本，如果未出现问题则可发布成为正式版本。

（2.1.0-beta.1这样声明的版本用户不会立马使用，可以用来做测试使用）

npx的用法

参考官网 npx - npm

npx 命令是 npm v5.2 之后引入的新命令，npx 可以帮我们直接执行 node_modules/.bin 文件夹下的文件。

npx 想要解决的主要问题，就是调用项目内部安装的模块。

执行脚本

npx webpack

这样执行，会直接省略配置 scripts 脚本。

避免安装全局模块

全局安装的模块会带来很多问题，如 多个用户全局安装的模块版本不同 。

npx create-react-app react-project

我们可以直接使用 npx 来执行模块。

它会先进行安装，安装后会将下载过的模块删除。这样可以保证项目是最新版本。

npm包的发布

首先我们需要先切换到官方源 nrm，这样更快。（关于 nrm 可以参考我之前的博客）

npm install nrm -g
nrm use npm # 切换到官方源

之后将名字更新一下，这里也可以发布作用域包选定版本。

忽略可以使用 .npmignore，然后可以直接进行发布了。

npm publish

这样我们自定义的包就被上传到 npm官网上啦。

本篇文章由莫小尚创作，文章中如有任何问题和纰漏，欢迎您的指正与交流。
您也可以关注我的个人站点、博客园和掘金，我会在文章产出后同步上传到这些平台上。
最后感谢您的支持！

码农公寓