一些杂项知识点

介绍

整合并记录一些不常用但有价值的知识点

JSON的特性

JSONS会把方法()=>(箭头函数)和undefined, 的key或value值删除掉, 但是null值不会删除

利用这个特性, 可以实现一个给后端按需传参的操作, 比如后端有个条件, 满足条件的时候传入相应的key: value参数, 那我们就可以通过给value或者key赋值为undefined来实现这个需求

const { code, message } = await saveUserWithCustId({
    // 通过三元表达式进行判断如果type为1 那么设置key名, 否则就是undefined, 不提交这个key
  [type === 1 ? 'btime' : undefined]:
    '提交的数据',
})

或者也可以通过给value设置undefined来实现

const { code, message } = await saveUserWithCustId({
  btime: type === 1  ? '提交的数据' : undefined,
})

其他拓展

在GET (opens new window) 请求中, 如果value是null, 那么在请求的时候也会不携带该条参数, 但是POST (opens new window) 会携带, POST支持value为null的提交

npm版本号定义

版本格式：X.Y.Z[-string] 其含义为：

• X：主版本号
• Y：次版本号
• Z：修正版本号
• string: 先行版本号或版本编译信息

举个例子：

6.3.2-alpha的含义为：

主版本号6，有6次不可向下兼容的更新迭代。 次版本号3，有3次小的功能迭代。6.*.* <=6.3.2的依赖声明，都可以安装此新包。 修正版本号2，有2次bug修改或其他非重大功能的修改。6.*.* <=6.3.2的依赖声明，都可以安装此新包。 先行版本号alpha，表示处理试验阶段。

扩展阅读：语义化版本 2.0.0 (opens new window)

package.json怎么识别依赖版本

假设有这些依赖内容：

"vue": "~2.5.22",
"vue-class-component": "^6.0.0",
"vue-router": "3.0.1",
"express": "latest",
"mongoose": "*"

符号^：锁定主版本，可更新次版本号、修正版本号和先行版本号, 只会执行不更改最左边非零数字的更新。

• 如果写入的是 ^0.13.0，则当运行 npm update 时，可以更新到 0.13.1、0.13.2 等，但不能更新到 0.14.0 或更高版本。
• 如果写入的是 ^1.13.0，则当运行 npm update 时，可以更新到 1.13.1、1.14.0 等，但不能更新到 2.0.0 或更高版本。

符号~：锁定主版本号和次版本号，可更新修正版本号和先行版本

• 如果写入的是 〜0.13.0，则当运行 npm update 时，会更新到补丁版本：即 0.13.1 可以，但 0.14.0 不可以。

没有符号：锁定所有版本号

• 例如"vue-router": "3.0.1"，只能安装版本为3.0.1的依赖包。

符号\*：定义某个版本号范围

• 例如vue-router": "3.0.*"，可以安装3.0固定的任意版本，比如3.0.1、3.0.2。

只有*：安装最新发布的版本，不一定是稳定版本

• 例如"mongoose": "*",可以安装6.0.0-rc2、3.9.7等。

latest：安装最新的稳定版本

• 例如"express": "latest"，可以安装4.18.1 (2022.06.13最新版本)。

>: 接受高于指定版本的任何版本。

>=: 接受等于或高于指定版本的任何版本。

<=: 接受等于或低于指定版本的任何版本。

<: 接受低于指定版本的任何版本。

=: 接受确切的版本。

-: 接受一定范围的版本。例如：2.1.0 - 2.6.2。

||: 组合集合。例如 < 2.1 || > 2.6。

可以合并其中的一些符号，例如 1.0.0 || >=1.1.0 <1.2.0，即使用 1.0.0 或从 1.1.0 开始但低于 1.2.0 的版本。

扩展阅读：npm docs - dependencies (opens new window)

不要太相信npm包的版本号！

如题，这个是血的教训换来的经验。

笔者在使用system.js时，使用的版本限制是：system.js: "^6.3.2"。 在安装依赖的时候，意外安装了> 6.3.2的版本，导致项目运行出错。 原因就是system.js作者，没有按照semver规范，进行版本号命名，导致笔者的项目，引入了不可向下兼容的更新，进而使项目运行出错。

dependencies 生产环境依赖

生产环境中使用到的依赖，统一安装在dependencies下。

举个例子：

"dependencies": {
	"chalk": "^2.4.2",
	"commander": "^3.0.0",
	"fs-extra": "^8.1.0",
	"inquirer": "^6.5.0",
	"mem-fs": "^1.1.3",
	"mem-fs-editor": "^6.0.0",
	"shelljs": "^0.8.3"
}

上述代码，是笔者做的cli工具包的package.json中的片段。 shelljs用于操作文件，如果改在devDependencies声明，则用户安装当前工具包后，运行会报错。 因为devDependencies字段声明的依赖，在npm install 工具包时，是不会安装的。必须在dependencies字段中声明，才会被安装。

devDependencies 生产环境非依赖

生产环境不需要使用的依赖，都需要安装在devDependencies下。 因为生产环境下，是不会安装devDependencies字段下的依赖的。

举个例子：

"devDependencies": {
	"@commitlint/cli": "^8.1.0",
	"@commitlint/config-conventional": "^8.1.0",
	"commitizen": "^4.0.3",
	"commitlint-config-cz": "^0.12.1",
	"cz-customizable": "^6.2.0",
	"standard-version": "^7.0.0"
}

上述代码，是笔者做的cli工具包的package.json中的片段。 commitizen是笔者用于规范Git提交规范的依赖包，只在开发环境中使用，所以在devDependencies中声明。

peerDependencies 运行环境依赖

当开发一些插件和工具包时，对使用方的运行环境的依赖包版本有要求，可以使用peerDependencies字段进行声明。

举个例子：

{
  "name": "tea-latte",
  "version": "1.3.5",
  "peerDependencies": {
    "tea": "2.x"
  }
}

当前工具tea-latte，依赖tea包。而且，要求tea包是主版本2。 当不满足要求时，控制台会进行报错处理。

注意 npm v7版本, peerDependencies会默认安装。 npm v3 到 npm v6版本, peerDependencies不会自动安装。

代码报错: Delete cr

windows电脑克隆代码后可能会出现以下eslint警告

问题根源

罪魁祸首是git的一个配置属性：core.autocrlf

由于历史原因，windows下和linux下的文本文件的换行符不一致。

• Windows在换行的时候，同时使用了回车符CR(carriage-return character)和换行符LF(linefeed character)

• 而Mac和Linux系统，仅仅使用了换行符LF

• 老版本的Mac系统使用的是回车符CR 复制代码

Windows	Linux/Mac	Old Mac(pre-OSX
CRLF	LF	CR
'\n\r'	'\n'	'\r'

因此，文本文件在不同系统下创建和使用时就会出现不兼容的问题。

我的项目仓库中默认是Linux环境下提交的代码，文件默认是以LF结尾的(工程化需要，统一标准)。

当我用windows电脑git clone代码的时候，若我的autocrlf(在windows下安装git，该选项默认为true)为true，那么文件每行会被自动转成以CRLF结尾，若对文件不做任何修改，pre-commit执行eslint的时候就会提示你删除CR。

现在可以理解ctrl+s和yarn run lint --fix方案为何可以修复eslint错误了吧，因为Git自动将CRLF转换成了LF。

解决问题

现在VScode，Notepad++编辑器都能够自动识别文件的换行符是LF还是CRLF。 如果你用的是windows，文件编码是UTF-8且包含中文，最好全局将autocrlf设置为false。

git config --global core.autocrlf false

注意: 需要删除之前的代码, 重新克隆一份

GitHub提交代码不记录问题

新电脑通过ssh绑定GitHub储存库后, 本地提交代码后出现不记录问题, 这大概率是本地电脑没有绑定GitHub的名称和邮箱, 必须绑定相应的名称和邮箱后, 才能记录提交记录

检查本地绑定的name和邮箱

// 检查本地电脑绑定GitHub的名称
git config user.name
// 检查本地电脑绑定GitHub的邮箱
git config user.email

修改本地绑定的name和邮箱

git config --global user.email "你的邮件地址"
git config --global user.name "你的Github用户名"

注意: 一定要和自己的GitHub邮箱和名称一致, 否则还是没有提交记录

npm i 下载依赖包失败

问题:

• 这个问题在国内会经常出现, 因为一些不可抗拒的问题, 下载一些项目依赖包(尤其是老项目)的时候会出现下载失败和下载缓慢(也是失败)的问题, 这种问题也会出现在国内一些流水线部署平台(比如: codeup)

解决方案:

• 给项目的根目录添加一个.npmrc的文件, 这个文件单独配置npm的设置, 给其npm设置为淘宝镜像

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

• 或者直接下载文件 (opens new window)

点击查看存放路径

参考文献

Delete ␍eslint(prettier/prettier) 错误的解决方案 (opens new window)

Github contribution中为什么没有提交记录？ (opens new window)

参考文献

package.json怎么管理依赖包版本？ (opens new window)

package.json 版本规则 (opens new window)