前端包管理工具 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


相关文章
|
20天前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
22天前
|
资源调度 JavaScript Linux
nvm, node.js, npm, yarn 安装配置
nvm, node.js, npm, yarn 安装配置
54 1
|
2天前
|
缓存 资源调度 JavaScript
yarn安装和使用及与npm的区别
yarn安装和使用及与npm的区别
|
19天前
|
资源调度 JavaScript 前端开发
Vite:下一代前端构建工具的快速上手
Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。
38 2
|
20天前
|
前端开发 JavaScript Java
npm与Maven:前端与后端构建工具深度对比学习
npm与Maven:前端与后端构建工具深度对比学习
|
22天前
|
存储 资源调度 JavaScript
pnpm、npm、yarn是什么?怎么选择?
pnpm、npm、yarn是什么?怎么选择?
26 2
|
22天前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
22天前
|
缓存 前端开发 JavaScript
如何优化前端性能:最佳实践与工具推荐
在当今互联网时代,用户对网页加载速度和性能的要求越来越高。本文将介绍一些优化前端性能的最佳实践,包括代码压缩、资源合并、懒加载等技术,并推荐一些实用的工具,帮助开发者提升网页加载速度和用户体验。
|
10天前
|
资源调度 分布式计算 Hadoop
Hadoop Yarn 核心调优参数
这是一个关于测试集群环境的配置说明,包括3台服务器(master, slave1, slave2)运行CentOS 7.5,每台有4核CPU和4GB内存。集群使用Hadoop 3.1.3,JDK1.8。Yarn核心配置涉及调度器选择、ResourceManager线程数、节点检测、逻辑处理器使用、核心转换乘数、NodeManager内存和CPU设置,以及容器的内存和CPU限制。配置完成后,需要重启Hadoop并检查yarn配置。
|
10天前
|
SQL 分布式计算 资源调度
Hadoop Yarn 配置多队列的容量调度器
配置Hadoop多队列容量调度器,编辑`capacity-scheduler.xml`,新增`hive`队列,`default`队列占总内存40%,最大60%;`hive`队列占60%,最大80%。配置包括队列容量、用户权限和应用生存时间等,配置后使用`yarn rmadmin -refreshQueues`刷新队列,无需重启集群。多队列配置可在Yarn WEB界面查看。

推荐镜像

更多