文章目录
前端工程化包管理器
- 包管理器是一种工具,它帮助开发者管理项目中的库和依赖项,如安装、更新、配置和卸载。在 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)的包管理。
-
模块管理(安装和卸载)
- 安装在全局环境下和安装在当前项目中
- 全装在全局:$ npm install xxx --global ($ npm i -g xxx)
- 安装在本地项目中:$ npm i xxx
- 把模块设置为开发依赖(开发中):$ npm i xxx --save-dev
- 把模块设置为生产依赖(部署到服务器):$ npm i xxx --save
-
安装在全局和本地的区别
-
安装在全局后对任何项目都有作用(也有可能导致版本冲突),但是只能基于命令的方式管理,不能基于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 文件,保证团队成员之间安装的依赖版本相同。
- 并行安装方式,提高了安装速度。
- 提供了离线模式,能够重新安装已下载的包,无需互联网连接。
- 更可读的输出信息。
- 修改 Yarn 源
Yarn 默认使用 https://registry.yarnpkg.com 作为它的包仓库源。在某些情况下,你可能需要修改源地址,比如当你需要更快的下载速度或者是使用私有的npm仓库时。以下是如何修改 Yarn 源的方法:-
临时使用其他源
在添加或更新依赖项时,可以通过 --registry 标志指定其他源,这是一种临时的修改方式:
- yarn add [package-name] --registry https://registry.npm.taobao.org
这个命令会从淘宝的 npm 镜像安装包,这个镜像通常在中国大陆访问速度较快。
- yarn add [package-name] --registry https://registry.npm.taobao.org
-
永久修改源
你可以通过修改全局配置永久地改变 Yarn 源:
- yarn config set registry https://registry.npm.taobao.org
这条命令会更新全局 yarn 配置,之后所有的包都会从这个新的源地址安装。
- yarn config set registry https://registry.npm.taobao.org
-
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 (内容分发网络) 服务,它允许开发者托管前端项目的静态文件,如 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 应用时非常流行和有价值的资源。由于其对开源项目的强大支持,它尤其适合小型项目和个人开发者。