前端包管理工具 npm yarn cnpm npx(二)

简介: 前端包管理工具 npm yarn cnpm npx

配置文件中常见的属性


必须填写的属性 name,version

  • name是项目名称
  • version 是当前项目版本号
  • description 是描述信息,作为项目的补充说明
  • author 是作者,发布时会用到
  • license 是使用的开源协议,发布会用到

private 属性

  • 记录当前项目是否时私有的
  • 当只为true时,npm 不能发布它

main 属性

  • 设置程序的入口
  • 当前包的入口文件
  • 注意区别webpack入口文件的概念,不是一个东西。

script 属性

  • 常配置一些脚步命令
  • 如我们经常使用的 npm run start,npm run build
  • npm start 也等于 npm run start,start 命令可以省去

dependencies属性

  • 无论哪个环境都需要依赖的资源包
  • 如vue全家桶,axios

devDependencies属性

  • 本地开发环境需要依赖的资源包如webpack,babel
  • 安装命令为 npm install webpack --save-dev

engines属性

  • 用于指定node和npm 的版本号,有些包对node版本有最低要求
  • 当下载包的时候,会优先检查版本,如不符合就会安装依赖时报错

browserslist属性

  • 支持到哪个版本的浏览器,和babel 配置强相关,可暂时先不关心,等之后我们可以专题讨论babel这里的知识

依赖包版本管理


npm 包版本一般规范为为X.Y.Z

X 为主版本号 一般为大版本更新,可能不兼容之前的版本,如Vue2.0和Vue3.0

Y 为次版本号 一般为新增一恶搞功能,向下兼容,如Vue2.0和Vue2.x

Z 为修订版本号 一般是修复了小问题,小版本优化

我们常见的版本号形如这样

^x.y.z:表示x是保持不变的,y和z永远安装最新的版本;

~x.y.z:表示x和y保持不变的,z永远安装最新的版本;

依赖包安装


  • 安装分为全局安装和局部安装
  • 如npm yarn webpack 这样的包就适合全局安装
    npm install webpack -g
  • 如vue axios 这样项目中用的包就适合局部安装
  • 安装之后会在当前目录下生成一个node_modules文件夹

npm install原理


npm 在安装之后,不仅生成了node_modules,还多出了一个package-lock.json 来支持缓存策略像yarn 看齐,这个我们后面会说到

1686823670386.jpg

1686823682984.jpg

npm instll 原理图解


  • npm install会检测是有package-lock.json文件:
  • 没有package-lock.json文件
  • 分析依赖关系,这是因为我们可能包会依赖其他的包,并且多个包之间会产生相同依赖的情况;
  • 从registry仓库中下载压缩包(如果我们设置了镜像,那么会从镜像服务器下载压缩包);
  • 获取到压缩包后会对压缩包进行缓存(从npm5开始有的)
  • 将压缩包解压到项目的node_modules文件夹中
  • 有package-lock.json文件
  • 检测lock中包的版本是否和package.json中一致
  • 不一致,那么会重新构建依赖关系,直接会走上面的流程;
  • 一致的情况下,会去优先查找缓存
  • 缓存没有找到,从registry仓库下载,直接走上面流程;
  • 命中缓存会获取缓存中的压缩文件
  • 将压缩文件解压到node_modules文件夹中;

package-lock.json


1686823732261.jpg

  • ** package-lock.json文件解析**
  • name:项目的名称;
  • version:项目的版本;
  • lockfileVersion:lock文件的版本;
  • requires:使用requires来跟踪模块的依赖关系;
  • dependencies:项目的依赖
  • version表示实际安装的版本;
  • resolved用来记录下载的地址,registry仓库中的位置;
  • requires记录当前模块的依赖;
  • integrity用来从缓存中获取索引,再通过索引去获取压缩包文件

npm 其他常用命令


卸载某个依赖包:

  npm uninstall package
  npm uninstall package --save-dev
  npm uninstall package -D

强制重新build

npm rebuild


清除缓存

npm cache clean


相关文章
|
1月前
|
存储 资源调度 JavaScript
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具
npm、cnpm 和 pnpm 是三种常用的 Node.js 包管理工具。npm 是官方默认的包管理器,提供依赖管理、安装和更新等功能;cnpm 是由阿里巴巴开发的 npm 镜像,专为中国大陆用户优化,解决下载速度慢的问题;pnpm 通过硬链接技术提高安装速度并节省磁盘空间,特别适合磁盘资源紧张的环境。三者命令类似,但各有特色,开发者可根据需求选择合适的工具。
93 5
|
2月前
|
存储 资源调度 JavaScript
一文带你了解PNPM以及 npm,yarn,pnpm区别
一文带你了解PNPM以及 npm,yarn,pnpm区别
111 9
|
4月前
|
缓存 前端开发 JavaScript
前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
|
4月前
|
缓存 JavaScript 前端开发
拿下奇怪的前端报错(三):npm install卡住了一个钟- 从原理搞定安装的全链路问题
本文详细分析了 `npm install` 过程中可能出现的卡顿问题及解决方法,包括网络问题、Node.js 版本不兼容、缓存问题、权限问题、包冲突、过时的 npm 版本、系统资源不足和脚本问题等,并提供了相应的解决策略。同时,还介绍了开启全部日志、使用替代工具和使用 Docker 提供 Node 环境等其他处理方法。
2901 0
|
4月前
|
前端开发 JavaScript 开发工具
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
从零开始:构建、打包并上传个人前端组件库至私有npm仓库的完整指南
707 0
|
4月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
225 0
|
6月前
|
缓存 前端开发 Linux
哇塞!NPM 缓存竟成开发拦路虎?快来掌握清空秘籍,开启前端开发逆袭之旅!
【8月更文挑战第20天】NPM是前端开发中管理依赖的关键工具。有时需清空其缓存以解决版本不一致或包损坏等问题,确保使用最新依赖。可通过命令`npm cache clean --force`强制清空全部缓存,或手动删除各系统下的缓存文件夹。注意清空缓存可能延长后续安装时间,建议事先备份依赖或确保可重新安装。正确管理缓存有助于提升开发效率。
218 1
|
6月前
|
JavaScript
request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
request to https://registry.npm.taobao.org/cnpm failed, reason: certificate has expired
184 2
|
8月前
|
存储 缓存 资源调度
你真的知道 NPM、Yarn 与 PNPM 这三个前端包管理器之间的区别吗?
【6月更文挑战第9天】NPM、Yarn和PNPM是主流前端包管理器,各有特色。NPM生态庞大,易用但速度慢;Yarn速度快,依赖管理稳定;PNPM性能优异,节省磁盘空间。Yarn和PNPM在速度和确定性上胜出,NPM因广泛使用和丰富资源领先。开发者可根据项目需求和喜好选择,三者共同推动前端开发进步。
180 8
|
8月前
|
资源调度
npm yarn 启动报错【已解决】
npm yarn 启动报错【已解决】
82 2

热门文章

最新文章

  • 1
    docker centos镜像 npm安装包时报错“npm ERR! code ECONNRESET”
  • 2
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    详解智能编码在前端研发的创新应用
  • 7
    巧用通义灵码,提升前端研发效率
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    智能编码在前端研发的创新应用
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    24
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    43
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    25
  • 4
    巧用通义灵码,提升前端研发效率
    84
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    137
  • 6
    详解智能编码在前端研发的创新应用
    92
  • 7
    智能编码在前端研发的创新应用
    75
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    35
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    111
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    73
  • 推荐镜像

    更多