前端包管理工具

发布时间:2024年01月20日

一、代码共享方案

  • npm 进行发布上传 npmregistry
  • npm 进行安装

二、npm 包管理工具

2.1 介绍

  • 安装 node 的时候自动安装

  • node package manager:Node 包管理工具

  • 可以通过 npm 安装说明已经上传到这个仓库里面了

  • npm 官网查看是否有发布:npmjs.org

2.2 npm的配置文件

  • package.json
  • 记录着项目的名称、版本号、项目描述
  • 项目所依赖的其他库的
  • npm init:自动生成 package.json
  • 手动从零开始创建项目:npm init -y:所有东西都是yes
  • 通过脚手架创建项目:vue create shopping:会搭建好这个项目所需要配置的东西,包括 package.json

2.3 常见的属性

  • name:项目的名称

  • version:项目版本

  • description:描述

  • author:作者

  • license:开源协议

  • private:true

    • npm不能发布它,防止私有项目或模块发布出去的方式
    • main属性:设置程序的入口
  • script:配置脚本命令npm run xxx

  • start、test、stop、restart可以省略run

  • dependencies:开发和生产环境都需要依赖的包:npm i axios

  • devDependencies开发依赖,有一些包在生成环境是不需要的,比如webpack、babel、vue-loader

  • 这个时候通过npm install webpack --save-dev安装到devDependencies属性中

    • 简写:npm install webpack -D
  • peerDependencies:对等依赖,你依赖的一个包,它必须是以另外一个宿主包为前提的

    • element-plus:必须安装vue
  • engines:指定 Node 和NPM 的版本号

  • browserslist:浏览器兼容情况

2.4 semver版本规范

  • X.Y.Z
  • X:主版本号,可能不兼容之前的版本,发生了重大版本更新
    • vue3 不兼容 vue2 版本的一些 api
  • Y:次版本号,增加了新特性和新功能,但是兼容之前的版本
  • Z:修订号,没有新功能,修正了之前的bug
  • x.y.z:明确的版本号
  • ^x.y.z:x 是保持不变的,y 和 z 永远安装最新的版本,后面两者动态
  • ~x.y.z:x 和y 是保持不变的, z 永远安装最新的版本

2.5 npm install 命令

  • 本地/局部安装:在哪个文件夹就安装到哪个文件夹里面,不会添加到环境变量里面

    • 会在当前目录下生成一个node_modules文件夹
    • 又分为
      • 开发依赖: -D
      • 生产依赖
  • 全局安装:npm i webpack -g

    • 必须依赖 webpack-cli -g
    • 一般安装的都是工具包:yarn、webpack
  • 原理

    • 从 远程registry 中进行下载
    • 若本地两个仓库都有 axios
    • 存在缓存的概念,通过算法去找对应的包==》标识符(integrity)
      • package-lock.json
    • package-lock.json:确定死的版本,一般不修改
      • name:项目的名称
      • version:项目的版本
      • lockfileVersion:lock文件的版本
      • requires:使用requires来跟踪模块的依赖关系
      • dependencies:项目的依赖
  • 卸载某个包:npm uninstall webpack npm ininstall axios -D

  • 强制重新build:npm rebuild

  • 清除缓存:npm cache clean

2.6 npm 发布自己的开发包

  • 编写自己的工具/库/框架
  • 必须包含 package.json
  • 除了在github也可以发布在registry
  • 步骤
    • 注册npm账号 https://www.npmjs.com
    • 在vscode里面登录:npm login
    • 修改 package.json
    • 发布到 npm registry上:npm publish
    • 更新仓库
      • 修改版本号:最好符合 semver 规范
      • 重新发布
    • 删除发布的包:npm unpublish
    • 让发布的包过期:npm deprecate

三、 yarn 工具

  • 早期的 npm 存在安装依赖速度缓慢、版本依赖混乱等问题

  • npm5 之后进行很多升级和改进

  • npm i yarn -g

  • 初始化:yarn init

  • 安装包:yarn add axios

  • 与npm 区别

四、cnpm工具

  • registry 是国外的服务器
  • 淘宝的镜像服务器十分钟更新一次,进行备份
  • 查看npm镜像:npm config get registry
  • 设置npm的镜像:npm config set registry=https://registry.npm.taobao.org
  • 安装一个新的工具:npm install cnpm -g
  • 设置cnpm的镜像:cnpm config set registry=https://registry.npm.taobao.org

五、npx工具

  • npx是 npm5.2之后自带的一个命令

  • 在安装项目之前,先创建package.json

    • 手动创建:npm init -y
    • npm i webpack-cli -D(开发依赖,打包)
    • 在里面script执行命令,优先在modules的bin里面找
    • 全局安装webpack:npm i webpack@3.6.0 -g
  • 使用 npx 直接(优先)在node_modules下面的bin文件中优先查找

    • webpack 对源代码进行打包
    • 默认情况下运行全局的
  • 局部命令的执行

    • 必须进入到目录,在终端使用如下命令 ./node_modules/.bin/webpack --version
    • 修改scripts脚本:“webpack”: “webpack --version”
    • 使用npx:npx webpack --version

六、pnpm 使用和原理

  • performant 高性能的 npm

    • 快速/高效/严格/支持 monorepos /严格
    • 速度快、节省磁盘空间
  • vue 源码已经开始使用 pnpm 了

  • 使用的公司:Microsoft、ByteDance

  • 依赖包将被存放在一个统一的位置

    • 同一依赖包使用相同的版本,磁盘上只有依赖包这一份文件
    • 同一依赖包需要使用不同的版本,仅有版本之间不同的文件会被存储起来
    • 所有文件都保存在硬盘上的统一的位置
      • 建立硬链接,不会占用额外的硬盘空间
  • pnpm 创建非扁平的 node_modules目录873

  • 安装npm install pnpm -g

  • 当使用npm或yarn安装依赖包时,所有软件包都将被提升到node_modules的根目录下
    a. 源码可以访问本不属于当前项目所设定的依赖包

  • 通过硬链接和软连接的方式连接起来

  • 整个结构嵌套的层级有点多,不会随便引入非自己安装的依赖pnpm的存储store

  • 获取对应目录:pnpm store path

  • 从store中删除当前未被引用的包来释放store的空间:pnpm store prune

七、硬链接/软连接

  • 硬链接:电脑文件系统中的多个文件平等地享有同一个文件存储单元
  • 符号链接:一种特殊的文件,包含有一条绝对/相对路径指向其他文件或者目录的引用
  • copy aaa.js ffff.js----------文件拷贝
    • 会在硬盘中复制出来一份新的文件数据
  • mklink /H bbb.js aaa.js----------建立了硬链接
    • bbb.js : 新文件
    • aaa.js:原文件
    • 指向了磁盘中的同一份数据
    • 只能操作文件
  • mklink aaa.js hhh.js-------建立软连接
    • 快捷方式
    • 找到原文件
    • 再找到磁盘中的数据
文章来源:https://blog.csdn.net/m0_68076330/article/details/135721235
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。