前端工程化开发（四）—— 包管理工具

前端工程化开发（四）—— 包管理工具

代码共享方式

• 方式一

  • 通过把源码上传 Github 实现我们的代码共享
  • 但是这样的方法还是有一定的坏处的，需要别人知道你的 Github 的 URL ，否则就无法进行下载使用
  • 开发人员不使用的时候，需要自己手动的删除相关的依赖
  • 遇到了的一个包管理工具升级的时候，上面的一系列的过程会被重复一遍

• 方式二

  • 使用前端中的专业的工具来管理我们的代码

    • 通过工具将我们的代码发布到特定的位置
    • 同时开发人员可以进行的是通过安装、升级、删除，来达到依赖的一系列相关操作

包管理工具 npm

• 包管理工具 —— npm

  • Node Package Manager ， 也就是 Node 的包管理工具
  • 前端的项目中，我们主要就是依靠这个工具来实现管理我们的依赖包
  • 这些包含有： vue，react， express，koa，angular.....都是可以通过 npm 包管理工具来进行管理的
  • www.npmjs.com npm 包管理工具官网

npm 配置文件

• 当我们执行 npm install 随意一个存在的包名 的时候，我们这个时候就会自动生成三个文件或者目录

  • node_modules

    • 我们安装的包具体所在的目录，每个包目录下面还是具备一个 package.json 文件存在的

  • package-lock.json

  • package.json

    • 就是 npm 的配置文件，用来实现的是记录关于项目的大概信息
    • 这种信息含有： 项目名称，项目版本号，项目的依赖库，项目作者....

• 我们如何实现获取我们的配置文件呐？？？

  • 方式一： 可以自己手动的创建文件 package.json 文件，然后自己配置即可

    • {
        "version": "1.0.0",
        "name": "demo_project",
        "author": "76433",
        "type": "commonjs",
        "main": "src/main.js",
        "scripts": {
          "dev": "node src/main.js"
        },
        "dependencies": {
      ​
        },
        "devDependencies": {
      ​
        }
      }
      

    • 上面文件的配置信息就包含了项目名称，项目版本号，项目作者，使用的模块化开发类型，运行脚本，依赖记录等信息

  • 方式二： 通过我们的手动实现从零创建项目： npm init 该命令执行后就是一个交互式的创建项目配置文件了

    • package name 项目名称，也就是你的包名称
    • version 项目的版本号，一般的命名为： x.y.z 的格式进行命名
    • description 项目的描述信息
    • entry point 指定项目的入口文件是什么
    • test command 测试
    • git repository 指定我们 git 仓库
    • keywords 关键字，用于进行搜索匹配使用
    • author 项目作者
    • license 开源协议类型指定

    • {
        "name": "demo_practice",
        "version": "1.0.0",
        "description": "a demo dir",
        "main": "main.js",
        "scripts": {
          "test": "echo "Error: no test specified" && exit 1"
        },
        "keywords": [
          "demo"
        ],
        "author": "juwenzhang",
        "license": "ISC"
      }
      

  • 方式三：通过一些开发框架的脚手架实现创建项目，脚手架会自动帮助我们生成对应的 package.json 文件的，并且内部含有相关的配置信息

    • vue 框架的开发以及 react 框架的开发都是具备我们的开发脚手架存在的呐，所以说可以直接使用存在的脚手架进行开发即可

• package.json 中的常见字段解析

  • name 必须书写的属性，这个是本次项目的名称

  • version 项目的版本号，这个是项目的版本号的管理文件

  • description 项目的描述信息

  • author 项目的作者信息（发布我们的开源项目的时候需要）

  • license 指定项目的开源协议是什么（发布我们的开源项目的时候需要）

  • private 设置的是当前的项目是否私有，bool 值，私有的时候，我们的 npm 就不可以进行发布开源了

  • main 设置我们程序的入口文件是什么，一般默认的是以 index 或者 main 为命名的，包管理的时候用于实现寻找的入口

  • scripts 用于实现的是配置一些脚本指令，任然是以键值对的形式存在的

    • 配置该命令后，我们就可以实现的是自动通过 ： npm run 或者 npm 来实现启动字段后的脚本了

    • 常配置的字段含有：

      • start 启动脚手架的配置字段
      • test 测试脚手架的配置字段
      • stop 停止脚手架的配置字段
      • restart 重启脚手架的配置字段
      • build 进行的是将项目进行打包

  • dependencies

    • 指定的是无论是我们开发环境还是生产环境都需要使用依赖的包
    • 一般就是我们在开发途中会使用到的依赖，需要使用 require 或者 import 进行导入使用的包
    • 该配置文件可以实现的是我们的直接根据该配置进行 npm install 就可以实现自动将这些依赖包按照版本号下载好
    • npm install 依赖包 --save 或者 npm install 依赖包

  • devdependencied

    • 这个里面的依赖就是在我们的生产环境中使用不到的一些依赖名称，开发依赖
    • npm install 包名 --save-dev 或者 npm install 包名 -D
    • 比如说我们的 webpack，babel，vite 等等的配置文件需要使用的依赖吧

  • peerDenpendencies

    • 就是我们安装的依赖包必须建立在某种包存在的基础之上才可以使用的包名，对等依赖
    • element-plus 只有在 vue 存在的前提下才可以使用 | ant design 只有在 react 包存在的前提下才可以使用

  • engines

    • 指定项目运行所需要的引擎

  • browserslist

    • 指定我们的项目兼容的浏览器列表

依赖版本管理

• 首先我们的 npm 中的依赖包的版本的规范是需要满足我们的 semver 版本规范的

• semver 版本规范的主要的形式为： x.y.z

  • x 主版本号（major）做了一些关于版本号的大改动
  • y 次版本号（minor）本次的版本实现的是做一些向下兼容的信息时，新功能增添，修改的版本信息
  • z 修订版（patch）向下兼容的问题修正，修复 bug

• 依赖版本号在 package.json 中的体现

  • x.y.z 指定版本号下载
  • ^x.y.z 大的版本改动不变，但是 y,z 肯定是安装的我们的最新的版本
  • ~x.y.z x，y 的版本信息不变，只是z 永远是 最新版本

• 对于我们的一个项目中，为了将我们的依赖的版本可以固定，这个时候就出来零另一个自动出现的文件 package-lock.json

  • 这个时候我们将别人的代码从 github 拉取下来后，可以实现的是就是： npm install 直接将该文件指定的依赖版本号下载

• package-;ock-json

  • name 我们项目的名称
  • version 我们项目的版本号信息
  • lockfileVersion lock文件的版本
  • requires 是否使用 requires 来进行跟踪模块的依赖关系
  • 该文件是自动管理的，不用手动修改的

npm install 底层原理

• npm install 实现下载我们的依赖包的时候是会检查是否具备我们的 package-lock.json 文件的

  • 如果有该文件的话

    • 首先先检测 package-lock.json 中的依赖版本号和 package.json 中的依赖版本号是否一致

      • 不一致的话那就直接重新构建依赖之间的关系

      • 一致的话，优先寻找缓存

        • 这个时候缓存没找到，再从 registry 仓库下载依赖
        • 找到缓存直接进行解压，存放在 node_modules 目录中

  • 如果没有该文件的话

    • 分析依赖之间的内在关系
    • 从 registry 仓库或者我们自己设置的镜像源中将依赖下载下来
    • 获取得到下载的依赖并且进行解压进行缓存
    • 将压缩包存放在我们的 node_modules 的目录下

  • 最后的最后就是重新生成我们的 package-lock-json 文件

npm 的其他常用命令

• 项目初始化命令

  • npm init
  • npm init -y

• 安装命令

  • npm install
  • npm install package -g
  • npm install package --save || npm install package
  • npm install package --save-dev || npm install package -D

• 卸载依赖命令

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

• 强制重新构建依赖关系命令

  • npm rebuild

• 清理缓存

  • npm cache clean

总结

• 该部分主要讲解了我们前端工程化开发中的 package.json 文件的基本的配置信息
• 以及 package-lock.json 的具体作用信息
• 同时还具备有关于我们的 npm 的基本使用
• 各位可以自己拓展的包管理工具还有： yarn cnpm pnpm
• npm_docs 网址