SunSeekerX's Notebook
GitHub (opens new window)

NPM 技巧

SunSeekerX ... 2020-4-15 大约 16 分钟

# NPM 技巧

# 📌 npm 常用命令

# 清除缓存
npm cache clean -f
# 查看全局安装的包
npm list -g --depth 0
# 卸载全局安装的包
npm uninstall -g jshint
# 更新全局安装的包
npm install -g npm

# 更改下载的包位置
npm config set prefix "d:\data\node_package\npm"
npm config set cache "d:\data\node_package\npm_cache"
# 查看配置
npm config list

# 加速下载常用
# 1、查看一下当前源
npm config get registry
# 2、切换为淘宝源
npm config set registry https://registry.npmmirror.com
# 3、换成原来的
npm config set registry https://registry.npmjs.org/

# 设置代理
npm config set proxy http://127.0.0.1:7890
npm config set https-proxy http://127.0.0.1:7890
# 取消代理
npm config delete proxy
npm config delete https-proxy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 📌 yarn 常用命令

# 升级依赖
yarn upgrade-interactive
# 清除缓存
yarn cache clean
# 升级到最新的稳定 yarn 版本
yarn set version latest

# 更改下载的包位置
yarn config set global-folder "d:\data\node_package\yarn"
yarn config set cache-folder "d:\data\node_package\yarn_cache"
# 查看配置
yarn config list

# 设置代理
yarn config set proxy http://127.0.0.1:7890
yarn config set https-proxy http://127.0.0.1:7890

# 如果 SSL 报错，可以禁用校验
yarn config set strict-ssl false

# 加速下载常用
# 1、查看一下当前源
yarn config get registry
# 2、切换为淘宝源
yarn config set registry https://registry.npmmirror.com
# 3、或者切换为自带的
yarn config set registry https://registry.yarnpkg.com
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# Workspace

# 查看工作区列表
yarn workspaces list
# 在指定的package中运行指定的命令。
yarn workspace <workspace_name> <command>
# 在所有package中运行指定的命令，若某个package中没有对应的命令则会报错。
yarn workspaces run <command>
1
2
3
4
5
6
1
2
3
4
5
6

安装根目录包

  • -D: 作为开发依赖安装
  • -W: --ignore-workspace-root-check 表示安装到工作区的根目录
yarn add [package_name] -D -W
yarn remove [package_name] -W
1
2
1
2

安装 dependencies

yarn workspace [package_name] add [package_name]@[version]
1
1

安装 devDependencies

yarn workspace [package_name] add -D [package_name]@[version]
1
1

删除包

yarn workspace [package_name] remove [package_name]
1
1

查看信息

yarn workspaces info --json
1
1

启动

yarn workspaces run test
1
1

# 升级到 yarn3

官方文档：https://yarnpkg.com/getting-started/migration (opens new window)

  1. 升级全局安装的 yarn 到最新的 v1

    npm install -g yarn
    1
    1

  2. 进入你项目的根目录

  3. 启用 v2

    yarn set version berry
    1
    1

  4. 如果使用了 .npmrc or .yarnrc 需要切换为新的格式 (opens new window)

  5. 添加nodeLinker: node-modules (opens new window) 到 .yarnrc.yml

    # httpProxy: "http://127.0.0.1:7890" # 代理选择打开

# httpsProxy: "http://127.0.0.1:7890" # 代理选择打开

# 如果不配置这个 jenkins 无法安装依赖，看原因是需要将 yarn.lock 提交上来
enableImmutableInstalls: false

npmRegistryServer: 'https://registry.npmmirror.com'

nodeLinker: node-modules

yarnPath: .yarn/releases/yarn-3.2.1.cjs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

  6. 安装版本插件

    yarn plugin import version
    1
    1

  7. 添加 .gitignore，更多参考 (opens new window)

    # yarn 2.0+
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
    1
    2
    3
    4
    5
    6
    7
    8
    1
    2
    3
    4
    5
    6
    7
    8

  8. 生成新版本的 lockfile

    yarn
    1
    1

  9. 提交你的修改

# lerna

多 Workspace 管理包的，未作深入研究。

首先使用 npm (opens new window) 将 Lerna 安装到全局环境中：

推荐使用 Lerna 2.x 版本。

npm install --global lerna
1
1

接下来，我们将创建一个新的 git 代码仓库：

git init lerna-repo && cd lerna-repo
1
1

现在，我们将上述仓库转变为一个 Lerna 仓库：

lerna init
1
1

你的代码仓库目前应该是如下结构：

lerna-repo/
  packages/
  package.json
  lerna.json
1
2
3
4
1
2
3
4

# 📌 pnpm 常用命令

# 安装
npm install -g pnpm
# 设置下载的包位置
pnpm config set store-dir "d:\data\node_package\pnpm"
# 查看配置
pnpm config list
# 安装依赖
pnpm install
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

# 📌 常用模块

# tbify

强烈建议使用该工具替换那种换源的方式进行下载加速。

安装

npm install -g tbify
1
1

使用

对于常用的包管理命令，tbify 提供了使用淘宝 NPM 镜像的等价命令，除了发布包到 npm 时必须使用 npm publish 外，都可以使用等价命令进行相关操作：

原命令 使用淘宝 NPM 镜像的命令 示例
nvm tnvm (或 tbify nvm) tnvm install 8.0.0
npm tnpm (或 tbify npm) tnpm install react
npx tnpx (或 tbify npx) tnpx kill-port 3000
yarn tyn (或 tbify yarn) tyn add react
pnpm tpm (或 tbify pnpm) tpm add react
pnpx tpx (或 tbify pnpx) tpx kill-port 3000

对于其他命令，在使用时加上 tbify 前缀即可，比如：

tbify printenv npm_config_registry
# -> https://r.npm.taobao.org
1
2
1
2

# husky

当您提交或推送时，您可以使用它来检查您的提交消息、运行测试、检查代码等。Husky 支持所有 Git 钩子 (opens new window)。

安装 husky（v8）

# 自动安装
npx husky-init && npm install       # npm
npx husky-init && yarn              # Yarn 1
yarn dlx husky-init --yarn2 && yarn # Yarn 2+
pnpm dlx husky-init && pnpm install # pnpm
1
2
3
4
5
1
2
3
4
5

查看文档进行手动安装 https://typicode.github.io/husky/#/?id=manual (opens new window)

hint: The '.husky/pre-commit' hook was ignored because it's not set as executable. hint: You can disable this warning with git config advice.ignoredHook false.

chmod ug+x .husky/*
1
1

# npm-check-updates

安装：

npm install -g npm-check-updates
1
1

使用： 检查 package.json 中 dependencies 的最新版本：

ncu
1
1

更新 dependencies 到新版本：

ncu -u
1
1

更新全部 dependencies 到最新版本(包括当前指定版本范围满足最新版本号的,比如^4.2.0 -> ^4.3.0)：

ncu -a
1
1

# sort-package-json

对项目的 package.json 进行排序，满足你的强迫症

# 1.全局安装插件
npm install --global sort-package-json
# 2.排序
npx sort-package-json
1
2
3
4
1
2
3
4

# tree-node-cli

用来生成文件树的插件，因为 windows 提供的 tree 不太好用。

安装

npm install -g tree-node-cli
1
1

使用示例

treee -L 3 -I "node_modules|.idea|objects|.git|.yarn" -a --dirs-first
1
1

帮助

$ tree -h

  Usage: tree [options]

  Options:

    -V, --version             output the version number
    -a, --all-files           All files, include hidden files, are printed.
    --dirs-first              List directories before files.
    -d, --dirs-only           List directories only.
    -s, --sizes               Show filesizes.
    -I, --exclude [patterns]  Exclude files that match the pattern. | separates alternate patterns. Wrap your entire pattern in double quotes. E.g. `"node_modules|coverage".
    -L, --max-depth <n>       Max display depth of the directory tree.
    -r, --reverse             Sort the output in reverse alphabetic order.
    -F, --trailing-slash      Append a '/' for directories.
    -S, --line-ascii          Turn on ASCII line graphics.
    -h, --help                output usage information
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 📌 常见问题

# node-gyp 报错

npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio
npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload.
npm ERR! gyp ERR! find VS For more information consult the documentation at:
npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
npm ERR! gyp ERR! find VS **************************************************************
npm ERR! gyp ERR! find VS
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use
npm ERR! gyp ERR! stack     at VisualStudioFinder.fail (D:\app\code\nvm\v16.14.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)
npm ERR! gyp ERR! stack     at D:\app\code\nvm\v16.14.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16
npm ERR! gyp ERR! stack     at VisualStudioFinder.findVisualStudio2013 (D:\app\code\nvm\v16.14.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14)
npm ERR! gyp ERR! stack     at D:\app\code\nvm\v16.14.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14
npm ERR! gyp ERR! stack     at D:\app\code\nvm\v16.14.0\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16
npm ERR! gyp ERR! stack     at D:\app\code\nvm\v16.14.0\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7
npm ERR! gyp ERR! stack     at D:\app\code\nvm\v16.14.0\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16
npm ERR! gyp ERR! stack     at ChildProcess.exithandler (node:child_process:406:5)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:520:28)
npm ERR! gyp ERR! stack     at maybeClose (node:internal/child_process:1092:16)
npm ERR! gyp ERR! System Windows_NT 10.0.22000
npm ERR! gyp ERR! command "D:\\app\\code\\nodejs\\node.exe" "D:\\app\\code\\nvm\\v16.14.0\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

安装最新的 Visual Studio (opens new window)，勾选 Desktop development with c++ 选项

win+x 使用管理员的 powershell 执行

npm install -g --production windows-build-tools
1
1

# 📌 NodeJs 版本管理 - nvm

# windows

使用 nvm (opens new window) 进行管理，具体安装查看 github 说明。

# mac

nvm (opens new window) 具体安装查看 github 说明。

# ubuntu 安装 nvm

由于 linux 特殊的用户系统，如果安装在了 root 用户下，切换到其他的用户是无法使用的。

参考：[linux 下为所有用户安装 nvm](https://www.soulfree.cn/?p=486

  1. 首先修改 /ect/profile 配置 nvm node 的安装地址

    vim /etc/profile
    1
    1

    添加

    export NVM_BIN="/usr/local/nvm/versions/node" # node安装地址
export NVM_DIR="/usr/local/nvm" # nvm安装地址
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
    1
    2
    3
    1
    2
    3

  2. 更新配置

    source /etc/profile # 更新配置
    1
    1

  3. 创建文件夹

    mkdir /usr/local/nvm
    1
    1

  4. 安装 nvm

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
    1
    1

  5. 基本使用

    # 查看远程可用
nvm ls-remote
# 查看远程可用 lts 版本
nvm ls-remote --lts
# 安装指定版本
nvm install v16.17.1
# 使用指定版本
nvm use v16.17.1
# 指定默认的版本
nvm alias default node
nvm alias default v16.17.1
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11

# 其他用户使用 nvm

需要重新安装一份。

# 进入用户文件夹，这里以 ssx 用户为例
cd $HOME
# 创建文件夹
mkdir -p  work/app
# 编辑用户的配置文件
vim .profile
# 添加
export NVM_BIN="/home/ssx/work/app/nvm/versions/node" # node安装地址
export NVM_DIR="/home/ssx/work/app/nvm" # nvm安装地址
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
# 创建文件夹
mkdir -p /home/ssx/work/app/nvm
# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
# 退出当前用户，重新登录下，就可以使用 nvm 了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 📌 规范提交代码

约定式提交 (opens new window)

一种用于给提交信息增加人机可读含义的规范

Commitizen (opens new window) - 命令行规范提交工具

文章参考：

Commit message 和 Change log 编写指南 - 阮一峰 (opens new window)

如何配置 Git Commit Message - 伯艺 (opens new window)

1️⃣ 安装 Commitizen (opens new window)

替代你的 git commit（帮助我们生成符合规范的 commit message）

commitizen 为我们提供一些 cli 命令，比如：commitizen init、 git cz

# 推荐全局安装
npm install -g commitizen
1
2
1
2

2️⃣ 安装 cz-conventional-changelog (opens new window)

是一个commitizen的 adapter（适配器），一个符合 Angular 团队规范的 preset（按照我们指定的规范帮助我们生成 commit message）

还有很多花里胡哨的适配器可以选择，看你们团队的选择了，例如带 emoji 表情的。。。😆

全局安装

个人推荐全局安装，因为这个包貌似和其他的包会产生某些冲突，导致项目用 yarn 方式安装的包无法使用，只能用 npm。

npm install -g cz-conventional-changelog
1
1

使用 bash 环境执行以下命令，Windows 用 power shell 测试文件编码会有问题。这是指定全局的适配器路径

echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
1
1

执行完这一步就可以使用了，下面的步骤为高级用法！

局部安装（不推荐，虽然官方推荐）

接下来，通过键入命令初始化项目以使用 cz-convention -changelog 适配器

# 有两种安装方式

# 1.手动安装 [推荐]
yarn add cz-conventional-changelog -D

# 2.使用npm自动安装
commitizen init cz-conventional-changelog --save-dev --save-exact

# 2.使用yarn自动安装
commitizen init cz-conventional-changelog --yarn --dev --exact
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

配置 package.json

{
    "scripts": {
        "commit": "git-cz"
    },
    "config": {
        "commitizen": {
          "path": "node_modules/cz-conventional-changelog"
        }
    }
}
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

3️⃣ 自定义 adapter - cz-customizable (opens new window)

可自定义的 Commitizen 插件。比如：默认的提交 types 可能特别多，有些时候我们可能只需要其中的某些 type，或者自定义 type。

yarn add cz-customizable -D
1
1

配置 package.json

{
    "config": {
        "commitizen": {
          "path": "node_modules/cz-customizable"
        }
    }
}
1
2
3
4
5
6
7
1
2
3
4
5
6
7

在根目录下，配置 .cz-config.js

module.exports = {
  types: [
    {
      value: 'feat',
      name: 'feat:     A new feature',
    },
    {
      value: 'fix',
      name: 'fix:      A bug fix',
    },
    {
      value: 'docs',
      name: 'docs:     Documentation only changes',
    },
    {
      value: 'refactor',
      name: 'refactor: A code change that neither fixes a bug nor adds a feature',
    },
    {
      value: 'perf',
      name: 'perf:     A code change that improves performance',
    },
    {
      value: 'test',
      name: 'test:     Add missing tests or correcting existing tests',
    },
    {
      value: 'build',
      name: 'build:    Add missing tests or correcting existing tests',
    },
    {
      value: 'revert',
      name: 'revert:   Revert to a commit',
    },
  ],
  allowBreakingChanges: ['feat', 'fix', 'refactor', 'perf', 'build', 'revert'],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

4️⃣ 校验 commit - commitlint (opens new window)

commitlint 帮我们规范 commit message（commitlint的实现方式和commitizen差不多也需要个 adapter）

  • @commitlint/cli 【命令行工具】
  • @commitlint/config-conventional 【校验规则】符合 Angular 团队规范（不同于代码规范），当然还有其它规范。
# [推荐局部安装]
yarn add @commitlint/config-conventional @commitlint/cli -D
1
2
1
2

package.json 配置

"commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  }
1
2
3
4
5
1
2
3
4
5

也可以在根目录下使用配置文件： .commitlintrc.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
}
1
2
3
1
2
3

针对自定义的 Adapter 进行 Lint

https://github.com/whizark/commitlint-config-czgithub.com (opens new window)

如果是使用 cz-customizable 适配器做了破坏 Angular 风格的提交说明配置，那么不能使用 @commitlint/config-conventional 规则进行提交说明校验，可以使用 commitlint-config-cz 对定制化提交说明进行校验。

安装校验规则：

npm i -D commitlint-config-cz @commitlint/cli
1
1

此时的 .commitlintrc.js 文件：

module.exports = {
  extends: ['cz'],
}
1
2
3
1
2
3

第三步: Husky

在提交代码前通常我们会通过 eslint 等工具来校验 我们的代码，然后再进行提交，由于 git 提供了 hook 机制，所以我们可以通过 git hook 在 pre-commit 进行 eslint，在 commit-msg 阶段进行 commit message lint。

3.1 pre-commit

https://github.com/typicode/huskygithub.com (opens new window)

配合 Husky (opens new window) 进行 git hook校验

# 安装
yarn add husky -D
1
2
1
2

配置 package.json

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $GIT_PARAMS"
    }
}
1
2
3
4
5
6
1
2
3
4
5
6

或者，使用配置文件：.huskyrc

{
  "hooks": {
    "pre-commit": "lint-staged",
    "commit-msg": "commitlint -e $GIT_PARAMS"
  }
}
1
2
3
4
5
6
1
2
3
4
5
6

3.2 lint-staged

当我们运行 eslint 或 stylelint 的命令时，只会检查我们通过 git add 添加到暂存区的文件，可以避免我们每次检查都把整个项目的代码都检查一遍。

yarn add lint-staged -D
1
1

配置 package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{tsx,ts}": ["prettier --write", "git add"]
  }
}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

5️⃣ standard-version

以上配置已经可以满足提交代码的常规要求，但是如果我们想自动生成 CHANGELOG，语义化我们的版本（Semantic Versioning (opens new window)）。 就需要借助 standard-version (opens new window)

standard-version 的作用就是生成 changelog 更新 package.json 和 package.lock.json 中的 version 字段。

关于版本：

# 版本
# major：主版本号，不兼容的API修改
# minor：次版本号，向下兼容，功能性增加
# patch：修订号，向下兼容，bug fixed

# 版本发布进度
# alpha（内测）
# beta（公测）
# rc （正式版本的候选版本）  Release Candiate

# npm 发布指令
# 升级补丁版本号：
npm version patch。
# 升级小版本号：
npm version minor。
# 升级大版本号：
npm version major。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

关于 release:

# 发布首个版本
npm run release -- --first-release

# 发布预发布版本
# 例如：v1.0.0 -> v1.0.0-0
npm run release -- --prerelease

# 发布与首个 alpha 版本
# 例如：v1.0.0 -> 1.0.1-alpha.0
npm run release -- --prerelease alpha

# 发布 major、minor、patch 版本
npm run release -- --release-as minor
1
2
3
4
5
6
7
8
9
10
11
12
13
1
2
3
4
5
6
7
8
9
10
11
12
13

安装

yarn add standard-version -D
1
1

配置 package.json

{
  "script": {
    // .....
    "release": "standard-version"
  }
}
1
2
3
4
5
6
1
2
3
4
5
6

6️⃣ 完整的配置

package.json

"scripts": {
    // ....
    "commit": "git-cz",
    "release": "standard-version"
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -e $GIT_PARAMS"
    }
  },
  "lint-staged": {
    "src/**/*.{tsx,ts}": [
      "prettier --write",
      "git add"
    ]
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.cz-config.js

// type: commit 的类型
// 参考：https://juejin.im/post/5afc5242f265da0b7f44bee4
// feat: 新特性
// fix: 修改问题
// docs: 文档修改
// style: 代码格式修改, 注意不是 css 修改
// refactor: 代码重构
// chore: 其他修改, 比如构建流程, 依赖管理.
// subject: commit 的概述, 建议符合  50/72 formatting
// ...
module.exports = {
  types: [
    {
      value: 'feat',
      name: 'feat:     A new feature',
    },
    {
      value: 'fix',
      name: 'fix:      A bug fix',
    },
    {
      value: 'docs',
      name: 'docs:     Documentation only changes',
    },
    {
      value: 'refactor',
      name: 'refactor: A code change that neither fixes a bug nor adds a feature',
    },
    {
      value: 'perf',
      name: 'perf:     A code change that improves performance',
    },
    {
      value: 'test',
      name: 'test:     Add missing tests or correcting existing tests',
    },
    {
      value: 'build',
      name: 'build:    Add missing tests or correcting existing tests',
    },
    {
      value: 'revert',
      name: 'revert:   Revert to a commit',
    },
  ],
  allowBreakingChanges: ['feat', 'fix', 'refactor', 'perf', 'build', 'revert'],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

.commitlintrc.js

module.exports = {
  extends: ['@commitlint/config-conventional'],
  // extends: ['cz']
  // cz 方式需要配合插件
  // yarn add commitlint-config-cz @commitlint/cli -D
}
1
2
3
4
5
6
1
2
3
4
5
6

7️⃣ 提交代码

使用git cz代替git commit会出现可选的命令行提交界面。

git-cz
1
1

# 📌 版本号管理

1️⃣ 简介

在 Node.js 项目中的前后端项目中，版本号管理使用的是 NPM 的命令——别跟我说，你是手动改 package.json 来更新版本号的。

在命令行敲入 npm version ? 就可以看到可以使用的命令：

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
1
1

major：主版本号

minor：次版本号

patch：补丁号

premajor：预备主版本

prepatch：预备次版本

prerelease：预发布版本

我的 package.jsond 的当前 version 为 6.0.0，依次输入下面的命令，package 的 version 会变更为提升后的版本号：

C:\Users\Administrator\Desktop\work\stage-view (master) (stage-view@6.0.0)
λ npm version preminor
v6.1.0-0
C:\Users\Administrator\Desktop\work\stage-view (master) (stage-view@6.1.0-0)
λ npm version minor
v6.1.0
C:\Users\Administrator\Desktop\work\stage-view (master) (stage-view@6.1.0)
λ npm version prepatch
v6.1.1-0
C:\Users\Administrator\Desktop\work\stage-view (master) (stage-view@6.1.1-0)
λ npm version patch
v6.1.1
C:\Users\Administrator\Desktop\work\stage-view (master) (stage-view@6.1.1)
λ npm version prerelease
v6.1.2-0
C:\Users\Administrator\Desktop\work\stage-view (master) (stage-view@6.1.2-0)
λ npm version premajor
v7.0.0-0
C:\Users\Administrator\Desktop\work\stage-view (master) (stage-view@7.0.0-0)
λ npm version major
v7.0.0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

如上所示，敲入npm version preminor，项目的 version 就从 6.0.0 变成了 6.1.0-0。

对了，项目的 git status 必须是 clear，才能使用上述命令。

如果你的项目中包含 git，它还会自动给你提交更新到 git，git commit -m "X.Y.Z"，所以还可以在 npm version NEWVERSION 后面加上-m 参数来指定自定义的 commit message。比如：

npm version patch -m "Upgrade to %s for reasons"
1
1

message 中的 s%将会被替换为版本号。

2️⃣ 版本号策略

版本号格式：主版本号**.次版本号.**修订号；

主版本号：当你做了不兼容的 API 修改；

次版本号：当你做了向后兼容的功能性新增；

修订号：当你做了向后兼容的问题修正；

处于开发阶段的项目版本号以 0.Y.Z 形式表示，此阶段正在开发基础功能、公众 API；

版本号只能增加，禁止下降，代码的修改必须以新版本形式更新；

如何判断发布 1.0.0 版本的时机？ 当你的软件被用于正式环境，它应该已经达到了 1.0.0 版。如果你已经有个稳定的 API 被使用者依赖，也会是 1.0.0 版。如果你很担心向下兼容的问题，也应该算是 1.0.0 版了。

万一不小心把一个不兼容的改版当成了次版本号发行了该怎么办？一旦发现自己破坏了语义化版本控制的规范，就要修正这个问题，并发行一个新的次版本号来更正这个问题并且恢复向下兼容。即使是这种情况，也不能去修改已发行的版本。

3️⃣ 编程式

在项目代码中有时候需要判断当前版本，可以通过读取 package 文件获取当前版本：

import { version } from './package.json'
1
1

要判断两个版本号字符串的大小，可以使用插件 compare-versions

compareVersions('10.1.8', '10.0.4') //  1
compareVersions('10.0.1', '10.0.1') //  0
compareVersions('10.1.1', '10.2.2') // -1
1
2
3
1
2
3

4️⃣ 自动更新版本号

在项目目录的 .git/hooks/ 目录中新建文件: post-commit——是的，没有后缀名。然后粘贴以下代码并保存文件：

#!/bin/shCOMMIT_MSG="$(git log --pretty=format:"%s" -1 head)"echo "$COMMIT_MSG" | grep  -q  "^[0-9]"if [ $? -ne 0 ];then  echo $(npm version patch)fi
1
1

上面代码会在每次 git commit 执行后被运行，它检查 commit 的 message 是不是版本号，如果不是，它就会执行 npm version patch 更新版本号。

来源：版本号管理策略&&使用 npm 管理项目版本号-朱嘉伟 (opens new window)

上次编辑于: 2022年11月22日 00:59
贡献者: SunSeekerX
Copyright © 2023 SunSeekerX