前端项目限制环境版本

前言

在如今这个前端项目框架较为成熟的年代,一个前端项目涉及到多个依赖,而这个项目的依赖又是居于项目的版本来的。所以一个大型的项目,多人进行联合开发的时侯,A 说项目启动不起来了,B 说安装包依赖出现一长串错误。C 水打包出现报错了。一开始遇到这种问题,没有经验的话很难发现问题的所在。所以在项目中限制安全运行环境版本,是一个很好的规避方式。本文以 pnpm,yarn 和 npm 这 3 种常见的包管理器做例子说明。

配置engines

npm-package的文档中有提到如何指定 Node.js 版本。通过在 package.json 中通过 engines 的字段来指定版本。

1
2
3
4
"engines": {
"node": ">=16.16.0",
"pnpm": ">=7.26.3"
}

然后再在项目的根目录新建.npmrc 文件,添加如下内容,启动严格模式。这样就会在版本不符合的时候提示版本问题。

1
engine-strict = true

这样在执行[npm|yarn|pnpm] install 安装项目依赖的时候,会检查 node 版本是否大于 16.16.0 并且 pnpm 大于等于 7.26.3 版本才能正确安装。

自动检测版本

上面的是手动进行检测版本,那么我们都希望像npm run dev 这样自动检测版本。那么就需要在package.json中加入指令

1
2
3
4
5
{
"script": {
"check-env": "echo check environment successfully"
}
}

之后可以运行pnpm run check-envyarn run check-env ,这里没有写npm的情况,主要是这个对于npm没有作用。

npm 自动检测版本

npm 检测版本需要搭配 semver 的插件写一个脚本来实现。

1
npm i semver

semver 是一个语义版本检测器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const semver = require("semver");
const { engines } = require("./package"); // 这里的package是你的package.json文件路径
const version = engines.node;

if (!semver.satisfies(process.version, version)) {
console.log(
[
"node环境变量版本错误",
"你的node环境启动位置" + process.mainModule.path + ".",
"要求环境版本" + version,
"你的环境版本" + process.version,
].join("\n")
);
process.exit(1);
} else {
console.log(`echo check environment successfully`);
}
1
2
3
4
5
{
"scripts": {
"check-env": "node srcipts/checkver.js" // 脚本相对于根目录的位置
}
}

再次运行npm run check-env 就能看到提示了

限定包管理器

1
2
3
4
5
{
"srcipt": {
"preinstall": "npx only-allow pnpm"
}
}

此时如果用非pnpm的包管理器就会提示错误