NPM
# NPM
# 加速下载 - tbify (opens new window)
安装
# npm
npm install tbify --global
# yarn
yarn global add tbify
# pnpm
pnpm add --global tbify
2
3
4
5
6
7
8
使用
对于常用的包管理命令,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
2
# 加速下载 -替换镜像
# 1、查看一下当前源
npm config get registry
# 2、切换为淘宝源
npm config set registry http://registry.npm.taobao.org/
# 3、换成原来的
npm config set registry https://registry.npmjs.org/
# yarn
# 1、查看一下当前源
yarn config get registry
# 2、切换为淘宝源
yarn config set registry https://registry.npm.taobao.org
# 3、或者切换为自带的
yarn config set registry https://registry.yarnpkg.com
# ==========================================================
# NPM
# ==========================================================
npm config set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
## 以下选择添加
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass # node-sass 二进制包镜像
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ # electron 二进制包镜像
npm config set puppeteer_download_host https://npm.taobao.org/mirrors # puppeteer 二进制包镜像
npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver # chromedriver 二进制包镜像
npm config set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver # operadriver 二进制包镜像
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs # phantomjs 二进制包镜像
npm config set selenium_cdnurl https://npm.taobao.org/mirrors/selenium # selenium 二进制包镜像
npm config set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector # node-inspector 二进制包镜像
npm config set node_sqlite3_binary_host_mirror https://npm.taobao.org/mirrors
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm cache clean --force # 清空缓存
# ==========================================================
# YARN
# ==========================================================
yarn config set registry https://r.npm.taobao.org # 注册模块镜像
yarn config set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
## 以下选择添加
yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass # node-sass 二进制包镜像
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ # electron 二进制包镜像
yarn config set puppeteer_download_host https://npm.taobao.org/mirrors # puppeteer 二进制包镜像
yarn config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver # chromedriver 二进制包镜像
yarn config set operadriver_cdnurl https://npm.taobao.org/mirrors/operadriver # operadriver 二进制包镜像
yarn config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs # phantomjs 二进制包镜像
yarn config set selenium_cdnurl https://npm.taobao.org/mirrors/selenium # selenium 二进制包镜像
yarn config set node_inspector_cdnurl https://npm.taobao.org/mirrors/node-inspector # node-inspector 二进制包镜像
yarn cache clean # 清空缓存
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
48
49
50
51
52
53
54
55
# 查看,更新,卸载全局安装的包
npm 查看全局安装过的包命令:
npm list -g --depth 0
解释一下:
命令 | 解释 |
---|---|
npm list | 显示安装过的包 |
-g | 指全局安装过的包 |
--depth 0 | 限制输出模块层级 |
卸载
npm uninstall -g jshint
更新
npm update -g jshint
# 升级package.json
依赖包
安装:
npm install -g npm-check-updates
使用: 检查 package.json 中 dependencies 的最新版本:
ncu
更新 dependencies 到新版本:
ncu -u
更新全部 dependencies 到最新版本(包括当前指定版本范围满足最新版本号的,比如^4.2.0 -> ^4.3.0):
ncu -a
# yarn 升级依赖
yarn upgrade-interactive
# 清除缓存
npm
npm cache clean -f
yarn
yarn cache clean
# 📂 NodeJs 版本管理
windows
使用 nvm (opens new window) 进行管理,具体安装查看 github 说明。
mac
nvm (opens new window) 具体安装查看 github 说明。
# 📂 规范提交代码
一种用于给提交信息增加人机可读含义的规范
Commitizen (opens new window) - 命令行规范提交工具
文章参考:
# 1️⃣ 安装 Commitizen (opens new window)
替代你的 git commit(帮助我们生成符合规范的 commit message)
commitizen 为我们提供一些 cli 命令,比如:commitizen init、 git cz
# 推荐全局安装
npm install -g commitizen
2
# 2️⃣ 安装 cz-conventional-changelog (opens new window)
是一个
commitizen
的 adapter(适配器),一个符合 Angular 团队规范的 preset(按照我们指定的规范帮助我们生成 commit message)还有很多花里胡哨的适配器可以选择,看你们团队的选择了,例如带
emoji
表情的。。。😆
全局安装
个人推荐全局安装,因为这个包貌似和其他的包会产生某些冲突,导致项目用
yarn
方式安装的包无法使用,只能用npm
。
npm install -g cz-conventional-changelog
使用 bash
环境执行以下命令,Windows
用 power shell
测试文件编码会有问题。这是指定全局的适配器路径
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
执行完这一步就可以使用了,下面的步骤为高级用法!
局部安装(不推荐,虽然官方推荐)
接下来,通过键入命令初始化项目以使用 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
2
3
4
5
6
7
8
9
10
配置 package.json
{
"scripts": {
"commit": "git-cz"
},
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
}
}
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
配置 package.json
{
"config": {
"commitizen": {
"path": "node_modules/cz-customizable"
}
}
}
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'],
}
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
2
package.json
配置
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
}
2
3
4
5
也可以在根目录下使用配置文件: .commitlintrc.js
module.exports = {
extends: ['@commitlint/config-conventional'],
}
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
此时的 .commitlintrc.js
文件:
module.exports = {
extends: ['cz'],
}
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
2
配置 package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
}
2
3
4
5
6
或者,使用配置文件:.huskyrc
{
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
}
2
3
4
5
6
3.2 lint-staged
当我们运行 eslint 或 stylelint 的命令时,只会检查我们通过 git add 添加到暂存区的文件,可以避免我们每次检查都把整个项目的代码都检查一遍。
yarn add lint-staged -D
配置 package.json
{
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"commit-msg": "commitlint -e $GIT_PARAMS"
}
},
"lint-staged": {
"src/**/*.{tsx,ts}": ["prettier --write", "git add"]
}
}
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。
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
2
3
4
5
6
7
8
9
10
11
12
13
安装
yarn add standard-version -D
配置 package.json
{
"script": {
// .....
"release": "standard-version"
}
}
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"
]
},
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'],
}
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
}
2
3
4
5
6
# 7️⃣ 提交代码
使用git cz
代替git commit
会出现可选的命令行提交界面。
git-cz
# 📂 版本号管理
# 1️⃣ 简介
在 Node.js 项目中的前后端项目中,版本号管理使用的是 NPM 的命令——别跟我说,你是手动改 package.json
来更新版本号的。
在命令行敲入 npm version ?
就可以看到可以使用的命令:
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
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
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"
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'
要判断两个版本号字符串的大小,可以使用插件 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
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
上面代码会在每次 git commit
执行后被运行,它检查 commit 的 message 是不是版本号,如果不是,它就会执行 npm version patch
更新版本号。