pikou1995 commented 3 years ago

最近完整看了一遍 npm docs，总结出来一些之前不知道的特性。

此篇文章的npm版本可能混有 6.x，7.x，以文档上对应的版本为准

基础篇

1. package

之前只知道一些简单的方式安装依赖，比如：

npm i lodash

其实只要是 package 都可以安装，package 定义如下：

一个 npm 包可以是下面任何一种类型：

a) 一个有 package.json 描述的程序文件夹
b) 一个用 gzip tarball 格式压缩 (a) 的文件
c) 一个 URL 能解析成 (b)
d) 一个 <name>@<version> 能表示发布到 registry 的 (c)
e) 一个 <name>@<tag> 能指向 (d)
f) 一个有 latest tag 的 <name> 满足 (e)
g) 一个 git url 当 clone 下来时满足 (a)

所以下次见到下面的形式也不要惊讶：

npm i https://github.com/lodash/lodash.git
npm i github:/lodash/lodash # 和上面一行等价
npm i /path/to/package.tar.gz # 可以用这种方式分享私有包，比如通过 npm pack 打包出来的包
npm i /path/to/package-dir # 这意味着你想测试发布一个包的时候，除了 `npm link`, 也可以用这种方式

2. npm config

因为相关信息散落在文档多处，所以可能有遗漏

配置的方式，优先级一般上面覆盖下面的

命令行参数的方式 --foo bar 或 --foo=bar，不设值默认为 true

npm [command] --registry https://registry.npmjs.org/

环境变量配置（前缀加 npm_config_）

export npm_config_registry=https://registry.npmjs.org/

包级配置，只在 cd 进这个目录的时候生效，发布后无效

# /path/to/package/.npmrc
registry=https://registry.npmjs.org/

用户级配置

# ~/.npmrc
# 也可以通过命令设置
npm config set registry https://registry.npmjs.org/

全局配置

# $PREFIX 可以通过 npm prefix -g 获取
$PREFIX/etc/npmrc

npm 安装目录中的配置，这个一般不应该被改动

/path/to/npm/npmrc

3. npm version

版本变动的时候应该使用这个命令，因为他会自动维护 semver。

有几个配置会影响 version 的结果，

tag-version-prefix 默认是'v'，一般情况下不需要修改这个值。

npm version 1.1.0 # v1.1.0

preid 默认是空字符串，影响 permajor | preminor | prepatch 的结果

npm version prepatch # v0.0.1-0
npm version prepatch --perid rc # v0.0.2-rc.0

4. npm dist-tag

为什么 npm i vue 的时候下载的是 vue2 而不是 3 呢，因为 vue3 发布的 tag 设置的是 next。

vue

tag 配置的默认值是 latest，npm publish | install 使用的 tag 对应的也是 lastst。

因此 npm version premajor | preminor | prepatch | prerelease 的版本 publish 时应加上 --tag=beta｜dev |... 防止让别人误下载。

对应的使用方法：

npm i package@beta
npm i package --tag beta

调优篇

1. npm audit

npm@6 新增的命令，能告诉使用者当前包可能存在的风险。npm install 的时候会自动执行。所以我们需要关注 audit 执行后的结果，并适时的执行 npm audit fix 安装兼容的安全更新。

但在一些自动化构建的过程中，audit 是会增加构建时间的。如果我们想优化构建速度，可以用以下命令关闭：

npm install --no-audit
npm set audit false

2. npm fund

会列出寻求赞助的包，有能力就支持一下开源项目，也可以通过下面命令关闭：

npm install --no-fund
npm set fund false

3. npm ci

如果每次都是完整安装(clean install)依赖的话，可以使用这个命令，这比 npm install 要高效。注意需要提供 package-lock.json 或 npm-shrinkwrap.json。

官方推荐把 package-lock.json 加入代码版本管理，可以准确地追溯 node_modules 的目录结构。npm-shrinkwrap.json 的优先级更高，可以通过 npm shrinkwrap 生成。npm ci 就可以跳过解析 package.json 里面的依赖分析，所以能加快速度。

npm ci 也会执行 audit

4. Pre & Post Scripts

自定义的每个指令如果有对应的 pre 和 post 指令，会按下面方式执行。

{
  "scripts": {
    "prebuild": "{{ 在 `build` 之前执行 }}",
    "build": "{{ 执行 }}",
    "postbuild": "{{ 在 `build` 之后执行}}"
  }
}

使用这个机制，可以简化流水线的配置，运行一些脚本做性能记录等。

内置指令也有对应的周期，详见文档。

5. fetch-timeout

首次请求包超时时间是 300000（单位ms，等于5分钟），所以网络不稳定的时候可能会卡很久。我们可以调低这个值，让 npm 尽快超时重试。

npm i --fetch-timeout=60000 # 1分钟

6. bundledDependencies

在 package.json 里面除了 dependencies 和 devDependencies，还有 bundledDependencies（还有更多，有兴趣自行探索）。

{
    // 注意这是个数组
    "bundledDependencies": [
        "lodash"
    ]
}

这个作用是打包的时候，同时打包 node_modules/下面的依赖，这样下载的时候就不用单独下载 bundledDependencies 里面的依赖。

装逼篇

1. npm view

查看包的基本信息

2. npm search

在 registry 中搜索关键词，但是网页搜索更好用。

3. npm completion

开启 npm 命令 tab 补全

source <(npm completion)
npm completion >> ~/.bashrc
npm completion >> ~/.zshrc

Windows 哭了 T^T，使用 linux 子系统或者 git-bash 吧。

4. npm doctor

一键检查 npm 的问题

npm doctor

5. npm explore

npm explore lodash # 会 cd 到 node_modules/lodash 文件夹下，然后可以做一些命令
npm explore lodash -- ls # 会在 node_modules/lodash 文件夹执行 ls

总结

npm 的很多功能因为篇幅和使用频率的原因我没有全部记录下来，比如怎么发包，管理包。也有更深层次的机制待我们发掘，比如它解决循环依赖的方式等。还有一些竞品 yarn，cnpm 之类的比较区别。但 npm 毕竟是 node 官方包管理器，也应该多了解一下我们的老伙计。

luoyeshu0507 commented 3 years ago

LGTM 💯

jerry-yo commented 3 years ago

👍又给我学到了

NinoPanic commented 1 year ago

💯

pikou1995 / pikou1995.github.io

npm - 多的是你不知道的事 #25

基础篇