前端-包管理器

文章目录

前端工程化包管理器

  • 包管理器是一种工具,它帮助开发者管理项目中的库和依赖项,如安装、更新、配置和卸载。在 JavaScript 和 Node.js 生态系统中,最流行的包管理器是 npm 和 yarn。

Npm

npm (Node Package Manager)

  • npm 是 Node.js 的默认包管理器,随 Node.js 一起安装。它有一个命令行客户端以及一个在线数据库(npm registry),其中包含了数百万个包(libraries)。
  • 通过 npm install 命令安装依赖,npm update 更新依赖,npm uninstall 卸载依赖等。它支持脚本运行、发布包和版本控制。
  • npm 5 之后引入了 package-lock.json 文件,用于锁定依赖的版本,确保安装一致性。
  • 自动安装 peer 依赖。
  • 支持私有包和组织范围(scoped)的包管理。
  1. 模块管理(安装和卸载)

    • 安装在全局环境下和安装在当前项目中
    • 全装在全局:$ npm install xxx --global ($ npm i -g xxx)
    • 安装在本地项目中:$ npm i xxx
      • 把模块设置为开发依赖(开发中):$ npm i xxx --save-dev
      • 把模块设置为生产依赖(部署到服务器):$ npm i xxx --save
  2. 安装在全局和本地的区别

    • 安装在全局后对任何项目都有作用(也有可能导致版本冲突),但是只能基于命令的方式管理,不能基于CommonJS 中的 require 导入使用(通俗说:就是不能导入到文件中基于代码来处理)

      • node -v 查看安装的node版本
      • $ npm root -g 查看全局安装到的目录
      • 之所以可以使用命令操作,是因为在全局目录下生成了一个 xxx.cmd 的文件
    • 安装在本地默认不能基于命令管理,但是可以导入到文件中基于代码操作,只对当前项目有用

      在本地安装模块之前,最好先:$ npm init -y,生成 package.json 模块配置文件,把安装的模块生成配置清单,存放在 package.json 中,后期别人需要部署项目的时候,只需要执行 $ npm i 就可以把所有的依赖项重新安装一遍 "跑环境"

      • $ npm i 是把开发和生产依赖都安装一遍
      • $ npm i --production 只安装生产依赖的模块
    • 在 package.json 中,可以基于 scripts 选项配置本地可执行的脚本命令 $npm run xxx
      javascript "scripts": { // AAA 是命令,值是要做的事情 "AAA": "node xxx.js" }

       在配置可执行脚本命令的时候,基于process的环境变量区分开发还是生产环境
       ```javascript
       "scripts": {
       	// set NODE_EVN=dev 设置全局环境变量(MAC下用 export NODE_EVN=dev)
           "serve": "set NODE_EVN=dev&&node test1.js",
          	"build": "set NODE_EVN=pro&&node test1.js"
       }
       ```
      
Npm主要命令
md 复制代码
npm -l    用于查看各个命令的简单用法(所以下面的可以用这个命令来查看)
npm init    用来初始化生成一个新的 package.json文件。
它会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。
npm -h 或 npm help    查看npm命令的帮助信息
npm ls 或 npm list    查看npm已安装的包信息
npm -v 或 npm --version    查看npm版本信息
npm install npm -g   npm更新自身
npm info \<pkg> version    查看某个模块最新发布版本信息,如npm info underscore version
npm search \<keyword>    查找与keyword匹配的模块信息
npm view \<pkg> version    查看一个包的最新发布版本
npm i 或 npm install    npm安装当前目录package.json里面的所有包,
下面的i同样可以用install代替,当卸载时,i用uninstall代替
npm update \<pkg> [-g]  更新指定模块,有-g表示全局
npm i \<pkg> [-g]    安装指定模块,有-g表示全局
npm i \<pkg>@version [-g]   安装指定版本的模块,有-g表示全局
npm i \<pkg> --save    安装包的同时自动更新package.json的依赖
npm i \<pkg> --save-dev    安装包的同时自动更新package.json的开发依赖
npm i \<pkg> --save-optional    安装包的同时自动更新package.json的可选版本依赖
npm i \<pkg> --save-exact   安装包并写入确切版本依赖,而不是一个可选的版本范围.
npm i \<pkg> -g --force 暴力

Yarn

Yarn 是一个流行的 JavaScript 包管理工具,在 npm 的基础上提供了更快的速度、更稳定的包依赖管理以及更安全的安装流程,以及yarn.lock文件确保依赖的一致性。

  • Yarn 是由 Facebook、Google、Exponent 和 Tilde 联合创建的替代 npm 的包管理器。
  • 和 npm 类似,Yarn 也支持安装、更新、配置和卸载包。通过 yarn add 安装依赖,yarn upgrade 更新依赖,yarn remove 卸载依赖等。
    特点:
  • 引入了 yarn.lock 文件,保证团队成员之间安装的依赖版本相同。
  • 并行安装方式,提高了安装速度。
  • 提供了离线模式,能够重新安装已下载的包,无需互联网连接。
  • 更可读的输出信息。
  1. 修改 Yarn 源
    Yarn 默认使用 https://registry.yarnpkg.com 作为它的包仓库源。在某些情况下,你可能需要修改源地址,比如当你需要更快的下载速度或者是使用私有的npm仓库时。以下是如何修改 Yarn 源的方法:
    • 临时使用其他源

      在添加或更新依赖项时,可以通过 --registry 标志指定其他源,这是一种临时的修改方式:

      • yarn add [package-name] --registry https://registry.npm.taobao.org
        这个命令会从淘宝的 npm 镜像安装包,这个镜像通常在中国大陆访问速度较快。
    • 永久修改源

      你可以通过修改全局配置永久地改变 Yarn 源:

      • yarn config set registry https://registry.npm.taobao.org
        这条命令会更新全局 yarn 配置,之后所有的包都会从这个新的源地址安装。
Yarn 主要命令
md 复制代码
以下是一些常用的 yarn 命令:

初始化新项目:
yarn init

添加一个依赖包:
yarn add [package-name]

添加一个开发依赖包:
yarn add [package-name] --dev

移除一个依赖包:
yarn remove [package-name]

安装所有依赖:
yarn # 或者 yarn install

升级依赖包:
yarn upgrade [package-name]

列出项目的依赖:
yarn list

运行定义在 package.json 中的脚本:
yarn run [script-name]

清除本地缓存:
yarn cache clean

全局添加包:
yarn global add [package-name]

全局移除包:
yarn global remove [package-name]

注意
使用 yarn 命令时,如果你已经修改了源,确保新的源是可靠和安全的,因为安装恶意软件包可能会危害你的系统安全。
如果你在一个团队中工作,确保与你的团队成员协调源的修改,因为这可能会影响他们的开发环境。

依赖项

  • 生产依赖是在生产环境中应用运行时所需的。它们都是在运行时需要的库。例如,UI组件库(如antd)、数据处理库(如lodash)、图表库(如echarts)和react等。
  • 开发依赖仅在开发过程中需要,例如构建工具、测试框架、类型定义文件等。@types包通常是TypeScript类型定义文件,它们仅在开发过程中需要,因此它们应该是开发依赖(devDependencies)。此外,代码格式化工具(如prettier)、CSS预处理器(如sass)和其他用于开发的工具也应该列在开发依赖中。
  • 检查依赖项的依赖:
    第三方库本身也可能有依赖项。使用npm ls <package-name>或yarn why <package-name>可以帮助你查看为什么某个包被安装,以及它的依赖树。
    这将显示该包的版本,以及哪些其他包依赖于它。

npm 和 Yarn 的比较

速度:Yarn 通常比 npm 更快,因为它并行执行操作,并且缓存了每个下载过的包,不需要每次都从网络上下载。

一致性:两者都通过锁文件来确保依赖的一致性,但 Yarn 的 yarn.lock 文件是自动生成和更新的,而在 npm 中,需要运行 npm shrinkwrap 命令来生成 npm-shrinkwrap.json(或使用 package-lock.json)。

用户界面:Yarn 提供了更简洁和用户友好的命令行界面。

网络性能:Yarn 通过队列请求、重试失败的请求和并行获得资源来优化网络利用率。

安全性:Yarn 在执行包脚本时提供了更严格的安全性措施。

随着 npm 的发展,尤其是 npm 5 和 6 的发布,npm 的许多性能和功能已经得到了显著提升,因此两者之间的差距已经缩小。选择哪个包管理器往往取决于个人喜好或项目要求。

jsDelivr CDN

  • jsdelivr开源项目的免费 CDN

  • jsDelivr 是一个免费的开源 CDN (内容分发网络) 服务,它允许开发者托管前端项目的静态文件,如 JavaScript 库、jQuery 插件、CSS 框架、字体以及任何其他通过 npm 或 GitHub 发布的项目。jsDelivr 提供了快速、可靠的数据传输,确保用户可以从最近的服务器获取到文件,从而减少加载时间和提升网站性能。

    • 与 Github 和 NPM 紧密集成,能够自动为几乎每个开源项目提供可靠的 CDN 服务。
    • 提供稳定的 CDN,可以在具有大量流量的热门网站的生产中使用。没有带宽限制或高级功能,任何人都可以完全免费使用。

    主要特性和优点包括:

    多重CDN提供商: jsDelivr 使用多个 CDN 提供商,包括 Cloudflare、Fastly 和其他,为用户提供最佳的性能和冗余。

    自动化的负载均衡: 它通过实时的负载均衡技术自动将用户请求转发到最快的CDN。

    版本控制: 开发者可以指定所需资源的确切版本,也可以使用版本范围或请求最新版本。

    npm和GitHub支持: 除了可以从 npm 加载包,jsDelivr 还可以直接从 GitHub 仓库加载文件,使得它对于开源项目特别有用。

    缓存和持久性: 提供长期的缓存,甚至在原始文件已从 npm 或 GitHub 删除后,仍然可以从 CDN 访问。

    无需注册: 使用 jsDelivr 不需要注册账户或进行设置,只需通过 URL 构建相应的链接就可以开始使用。

    文件合并: 可以在单个 HTTP 请求中合并多个文件,减少请求数量。

  • 举一个例子

    js 复制代码
    如果你想要通过 jsDelivr 加载 jQuery 的最新版本,你可以使用以下链接:
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    如果你想要从 GitHub 加载文件,可以这样做:
    <script src="https://cdn.jsdelivr.net/gh/user/repo@version/file"></script>

jsDelivr 的这些特点使它成为开发者在部署网站或 web 应用时非常流行和有价值的资源。由于其对开源项目的强大支持,它尤其适合小型项目和个人开发者。

相关推荐
熊的猫40 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai3 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书