前端包管理工具与配置项

2023-11-12 08:10:01 浏览数 (3)

任何一个项目的构建离不开工具和统一的管理标准,在项目开发和维护过程中,我们需要了解安装包的相应工具和配置文件,以此来有效的进行项目的迭代和版本的更新,为项目提供基本的运行环境。

包管理工具

包管理工具顾名思义就是统一管理这些轮子的软件或者工具,它以多种方式自动处理项目依赖关系、提供了命令行工具(CLI)、支持跟踪依赖项和版本等功能,除此之外还可以安装、卸载、更新和升级包,配置项目设置,运行脚本等等。

简单的说: 包就像一个大仓库,仓库里雇佣了很多机器人,你只需要往仓库里丢东西即可,仓库里的机器人会自动给我们进行依赖包分类,如果需要一些个性化的服务,那么我们进行配置一下就可以了,就可以按我所配置的方式进行工作。

常用的高级语言基本都有自己的包管理工具

  • Java 语言有 Maven 仓库、Gradle;
  • Go 语言有 dep 和 glide;
  • Python 语言有 pip;
  • Ruby 语言有 Gem 与 Bundler;
  • PHP 语言有 (据说是最好的编程语言)Composer;
  • Node.js 有多个包管理工具 NPM 仓库、Yarn 等。

为什么会有包管理工具?

我们可以回想 Jquery 时代, 前端在开发项目是什么样的?

JS功能:

  • 需要什么插件,去百度搜寻各种插件 ,然后将插件放置到项目目录下,然后在页面中引入js路径,使用插件功能实现需求。
  • 自己造个插件轮子

UI 功能:

  • 查找类似UI的模板,复制粘贴一把梭
  • 自己封装个ui模板,套用

.......

放到如今现在,各个框架满天飞的时代,那得累死你。

  • 我们得保证每个js文件执行引入的顺序,以及文件与文件的依赖关系,不然就会出现各种奇怪的BUG.
  • 工具的版本问题,我们想升级项目中的依赖工具,就要去寻找资源,手动下载,手动替换。
  • .....

这时,前端的包管理工具出现了,解决了此类问题。

作为各种包管理工具中最早出现的开拓者,Npm 是 Node.js 官方提供的,他的出现同时也制定了一些列的包管理规范。

  • 将所有第三方依赖包放在 node_modules 这个文件目录下,我们在增加,删除,升级依赖也只是更新这个文件下的相关依赖包。
  • 增加 package.json 文件,这个文件中存放本项目及项目的依赖和版本信息,这样我们就可以一目了然的了解本项目用到了什么,都是什么版本的,不用多处寻找。
  • 在使用依赖时,Node 提供的支持是内置的 require 方法,默认会到这个目录下去检索模块,无需手动指定路径。

有哪些包管理工具

主流的前端包管理工具有 npm、yarn、pnpm、以及国内的镜像 cnpm、tyarn 等,这是包管理器都是基于 nodejs。

  • npm 是 2010 年发布的 nodejs 依赖管理工具,在此之前,前端的依赖管理都是手动下载和管理的。

<!---->

  • yarn 是 Facebook 于 2016 年 发布的替代 npm 的包管理工具,还可以作为项目管理工具,定位是快速、可靠、安全的依赖管理工具。

<!---->

  • pnpm 是 2017 年发布的一款替代 npm 包管理工具,具有速度快、节省磁盘空间的特点。

npm yarn package.json

npm

npm 是 Node Package Manager 的简称,顾名思义,它是 node 的包管理工具,也是目前世界上最大的开源库生态系统。

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

安装 Node 的同时,会自动安装 npm, 不需要手动安装npm 了。

npm 常用命令
  • 版本查看

$ npm -v

  • 使用淘宝镜像的命令:

npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 初始化nodejs项目,生成 package.json 文件

npm init -y

-y 直接生成默认的package.json 文件,不需要自定义设置

  • 局部安装

npm install <package_name>

  • 全局安装 -g

npm install -g <package_name>

安装到全局并不会体现到package.json 里面

  • 安装到生产依赖 --save

npm install <package_name> --save | -S

安装到当前项目,并将包信息写入到dependencies

  • 安装到开发依赖 --save-dev

npm install <package_name> --save-dev | -D

安装到当前项目 并写入到devDependencies

  • devDependencies与dependencies 的区别:

devDependencies 是本地开发时用的依赖项

dependencies 是生产环境的依赖项

  • 卸载模块

$ npm uninstall express

卸载后,你可以到 /node_modules/ 目录下查看包是否还存在,或者使用以下命令查看:

$ npm ls

  • 更新模块

$ npm update express

  • 搜索模块

$ npm search express

npm 安装命令

1、局部安装

npm install <package_name>

说明 安装到当前项目

npm 5x 以后 这个命令等同于npm install --save <package_name> 同时也是会同样写入到依赖 dependencies

2、 全局安装 -g

npm install -g <package_name>

安装到全局并不会体现到package.json 里面

3、安装到生产依赖 --save

npm install <package_name> --save | -S

安装到当前项目,并将包信息写入到dependencies

4、安装到开发依赖 --save-dev

npm install <package_name> --save-dev | -D

安装到当前项目 并写入到devDependencies

devDependencies与dependencies 的区别:

devDependencies 是本地开发时用的依赖项

dependencies 是生产环境的依赖项

  1. -- save 理解
  2. node --save可以省略掉手动修改package.json的步骤
  3. 当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(在模块根目录下npm install module-name),然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里(dependencies)。

<!---->

  • -save和save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分

npm install module-name -save-dev 自动把模块和版本号添加到devdependencies部分

  1. 安装依赖
  2. 安装依赖包

npm install

会将package.json 里面的devDependencies和dependencies下的所有包都会下载到项目的node_modules文件夹下(没有的改文件夹会新建一个)

  • 只安装生产依赖

npm install --production

  • 查看全局安装的模块

npm list -g

  • 如果要查看某个模块的版本号,可以使用命令如下

npm list grunt

npm 卸载
代码语言:txt复制
$ npm uninstall 包名

查看卸载的包是否存在

代码语言:txt复制
 npm ls
npm 更新包
代码语言:txt复制
npm update 包名
npm 搜索包
代码语言:txt复制
npm search 包名
npm 版本号

在自己发布 插件时,需要填写 package.json 的 version,下面我就来了解一下 版本号的一些知识点,如何正确写 版本号。

NPM使用语义版本号来管理代码。

语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号。当代码变更时,版本号按以下原则更新。

0 人点赞