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

    • html1
    • html2
  • CSS

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

    • 数据类型及引用问题
    • 处理 Blob 类型文件下载问题总结
    • localStorage 与 sessionStorage 区别
    • JavaScript 中的 script 标签问题详解
    • JavaScript 中的 this 指向问题详解
    • SessionStorage踩坑记录
    • 动态加载 JS 脚本方法对比
    • 浏览器页面关闭场景下的数据上报
    • HTTP流式接口详解与封装实践
    • JavaScript 中 this 绑定与解构:为什么 Pinia Store 可以解构,但 Class 实例方法不行?
  • es6

    • Promise
    • es6 模块导出方式全解析
    • reduce
    • forEach 中使用 async/await 的异步陷阱
  • 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 Scoped CSS 深度解析
    • Vue 3 Teleport 组件完全指南:从原理到实战
    • Vant List 组件中双向绑定 loading 的注意事项
    • Vue 3 + Vite 中的路径别名与静态资源处理深度解析
    • 获取图片高度
    • 深入理解 Pinia:storeToRefs vs toRefs - 避开 TypeScript 类型推断的坑
  • webSocket

    • WebSocket 鉴权入门(实战版):握手票据 / 首帧鉴权 + 连接级 cid
  • Electron

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

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

    • Webpack 介绍
  • Vite

    • Vite CLI 常见命令
    • vite 与 webpack 比较
    • Vite base 配置与 public 静态资源路径问题
  • 客户端数据库

    • IndexedDB 索引陷阱:字段重命名后索引返回旧数据
    • IndexedDB 事务陷阱与最佳实践:TransactionInactiveError 完全解析
  • UniApp

    • uni-app + Monorepo + 微信小程序热更新失效问题排查与结论总结
    • Monorepo + uni-app 开发中监听 / 热更新机制差异与解决方案
    • uni-app 运行与编译原理梳理
    • 为什么 uni-app 在 Monorepo 中必须做「环境区分」,而 Web 项目却不用?
  • 项目工程

    • 前端代码风格
    • Vue3 项目规范
    • npm 镜像问题
    • 包管理工具
    • 使用 engines 限制开发环境依赖
    • 打包与shell交互指定模式
    • Monorepo示例
    • PC 项目兼容 uni-app:基于 pnpm Monorepo 的工程化重构实践
    • Vue3 + Vite + pnpm Monorepo 迁移问题指南
    • 前端工程化:深入理解 npm 依赖管理机制
    • pnpm 修改依赖源码打包报错
    • 代码片段
  • 移动端

    • 浏览器跳转外部应用时请求状态码问题
  • 记录一下小程序
  • 控制浏览器正确保存网站账号密码的技巧
  • 信息泄露
  • 使用Gulp实现前端项目哈希化压缩打包
  • 前端缓存策略与文件哈希化的关联解析
  • 浏览器刷新方式与 Vue 生命周期、缓存行为解析
  • 浏览器消息铃声实现记录

使用 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交互指定模式