SSF0SSF0
首页
前端
  • Node
  • Go
  • C#
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
Timeline
Github
标签
分类
首页
前端
  • Node
  • Go
  • C#
  • MySql
  • Bash
  • Git
  • Docker
  • VuePress
  • CI/CD
  • 服务器
  • 网站
  • 学习资料
  • 软件
Timeline
Github
标签
分类
  • HTML

    • html1
    • html2
  • CSS

    • Flex 布局常见问题与解决方案
  • JavaScript

    • 数据类型及引用问题
    • 处理 Blob 类型文件下载问题总结
    • localStorage 与 sessionStorage 区别
    • JavaScript 中的 script 标签问题详解
    • JavaScript 中的`this`指向问题详解
    • SessionStorage踩坑记录:它真的能"只设置一次"吗?
    • 动态加载 JS 脚本方法对比
    • 浏览器页面关闭场景下的数据上报
  • es6

    • Promise
    • es6 模块导出方式全解析
  • Vue2

    • created VS mounted 发起异步请求
    • vue2-2
  • Vue3

    • Vite + Vue3 修改 element-plus 源码
    • Vue v-if 与 v-show
    • Vue3 ref 获取组件
    • Vue3 路由传参
    • 父子组件与组件里 Hooks 加载顺序
    • 第三方组件传入参数TS提示
    • Vue3 Props 在 Hooks 中的响应性处理
    • Vue Router 的两种历史模式及部署配置详解
    • 在Vue 3项目中顺利集成Tailwind CSS的完整指南
    • Vue 3 深度选择器:deep()完全指南
  • Electron

    • 快速构建 electron + vue3 项目
  • TS

    • TS 泛型
    • 记录模板使用断言的问题
    • type 与 interface
  • WebPack

    • Webpack 介绍
  • Vite

    • Vite CLI 常见命令
    • vite 与 webpack 比较
  • 项目工程

    • 前端代码风格
    • Vue3 项目规范
    • npm 镜像问题
    • 包管理工具
    • 使用 engines 限制开发环境依赖
    • 打包与shell交互指定模式
    • 使用 pnpm 构建 Monorepo 实战指南
    • pnpm 修改依赖源码打包报错
  • 记录一下小程序
  • 控制浏览器正确保存网站账号密码的技巧

使用 engines 限制开发环境依赖

在前端项目开发中,由于 Node.js 和包管理工具的版本差异,经常会出现"在我的机器上能运行"的问题。为了解决这个问题,我们可以使用 package.json 中的engines字段来限制开发环境。

engines 配置详解

在 package.json 文件中,可以添加以下配置:

"engines": {
  "node": "18.15.0",
  "pnpm": "8.15.4"
}

这个配置清晰地表明项目需要使用:

  • Node.js 版本为 18.15.0

  • pnpm 版本为 8.15.4

engines 配置的作用

添加 engines 配置后,会产生以下效果:

  1. 明确开发环境要求:向所有开发者说明项目所需的准确环境版本

  2. 版本检查:常见的包管理工具(npm、yarn、pnpm 等)会检查这个配置,当版本不匹配时发出警告或报错

  3. 自动化部署支持:在支持 engines 配置的部署平台(如 Heroku 等)上,会自动使用指定的版本

更多 engines 配置选项

除了 Node.js 和 pnpm,您还可以根据项目需要限制其他工具的版本,例如:

"engines": {
  "node": "18.15.0",
  "npm": "9.5.0",
  "yarn": "1.22.19",
  "pnpm": "8.15.4"
}

扩充 .npmrc 文件

难免有些开发人员使用 npm 安装依赖,所以需要扩充 .npmrc 文件

engine-strict=true
  1. .npmrc 中 engine-strict=true 开启时:

    • npm 安装|发布|更新依赖(npm install)会严格检查 package.json 中的 engines 要求

    • npm 运行脚本(npm run dev)不受影响,可以正常运行

  2. .npmrc 中 engine-strict=true 注销时:

    • npm 安装|发布|更新依赖时会读取 package.json 中的 engines 配置,但只作为警告,不会阻止安装

    • npm 运行脚本正常工作

如何切换到指定 Node.js 版本

如果您的 Node.js 版本与项目要求不符,可以使用 nvm(Node Version Manager)来安装和切换到指定版本:

# 安装指定版本
nvm install 18.15.0

# 切换到指定版本
nvm use 18.15.0

总结

在项目中使用 engines 配置是一种工程化实践,可以确保所有开发者在统一的环境下工作,避免因环境差异导致的各种问题。这是解决"在我的电脑上能运行"问题的有效方法,特别适合团队协作开发的项目。

最后更新时间:
贡献者: 何风顺
上一页
包管理工具
下一页
打包与shell交互指定模式