首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我在创建包的时候,必须把我的peerDependencies作为外部变量列在webpack的配置中?

在创建包时,将peerDependencies作为外部变量列在webpack的配置中是为了解决包的依赖关系和版本冲突的问题。

peerDependencies是指在开发一个包时,该包所依赖的其他包的版本范围。当其他开发者使用你的包时,他们可能已经安装了这些依赖的不同版本。为了避免版本冲突和不一致性,将peerDependencies列在webpack的配置中可以确保使用者在安装你的包时,会自动安装符合要求的依赖版本。

将peerDependencies列在webpack的配置中有以下几个优势:

  1. 版本一致性:通过将peerDependencies列在webpack的配置中,可以确保使用者安装的依赖版本与你的包所需的版本一致,避免了版本冲突和不兼容性的问题。
  2. 提示依赖关系:将peerDependencies列在webpack的配置中可以提醒使用者,他们需要安装哪些依赖以及所需的版本范围,方便他们正确地配置环境。
  3. 减小包的体积:将peerDependencies列在webpack的配置中可以告诉webpack这些依赖是外部变量,不需要打包进最终的包中,从而减小包的体积。

应用场景: 在开发一个包时,如果该包依赖于其他包的特定版本,且这些依赖在使用者的项目中已经安装,那么将peerDependencies列在webpack的配置中可以确保使用者在安装你的包时,会自动安装符合要求的依赖版本。

推荐的腾讯云相关产品和产品介绍链接地址: 腾讯云提供了多种云计算相关产品,其中与webpack配置相关的产品包括云服务器(CVM)和云函数(SCF)等。这些产品可以用于部署和运行webpack打包后的应用程序。

  • 云服务器(CVM):腾讯云的云服务器产品,提供了灵活可扩展的计算能力,可以用于部署和运行webpack打包后的应用程序。了解更多:云服务器产品介绍
  • 云函数(SCF):腾讯云的无服务器计算产品,可以帮助开发者在云端运行代码,无需关心服务器的管理和维护。可以将webpack打包后的应用程序作为云函数部署和运行。了解更多:云函数产品介绍

请注意,以上推荐的产品仅为示例,实际选择产品应根据具体需求进行评估和选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

这还是我最熟悉的package.json吗?

这部分知识,经过这轮复习,也发现了自己的很多不足,之前把常用的命令和配置玩熟了,却没关心npm已经有了更多新的玩法,而这些玩法却实实在在地在解决别人的问题。...bin 在一些 CLI 工具中用得很频繁,比如 Vue CLI。 在开发 npm 包时,要求发布的可执行脚本要以#!/usr/bin/env node开头,这是为什么呢?...比如我安装了一个包到devDependencies中,但是不小心在项目中引用了它,最后也被 webpack 打包到构建结果中了。这是怎么回事呢?...peerDependencies 我是package-a,你装我,你就必须装我的peerDependencies。...举个例子,我开发一个组件,不想发布到 npm 时包含了 vue 的代码,这就需要外部提供 vue ,所以我把 vue 定义在 peerDependencies 也无可厚非。

51130

这还是我最熟悉的package.json吗?

bin 在一些 CLI 工具中用得很频繁,比如 Vue CLI。 在开发 npm 包时,要求发布的可执行脚本要以#!/usr/bin/env node开头,这是为什么呢?...比如我安装了一个包到devDependencies中,但是不小心在项目中引用了它,最后也被 webpack 打包到构建结果中了。这是怎么回事呢?...peerDependencies 我是package-a,你装我,你就必须装我的peerDependencies。...举个例子,我开发一个组件,不想发布到 npm 时包含了 vue 的代码,这就需要外部提供 vue ,所以我把 vue 定义在 peerDependencies 也无可厚非。...但是,在开发组件时,一般还需要本地开发环境跑一个 demo 试试效果,这时候是依赖 vue 的,所以还需要在 devDependencies 中安装 vue 。

43510
  • NPM 组件你应该知道的事

    一份代码,多种消费方式 使用新特性语法,由于一般项目中,会默认不对 node_module 中的库进行编译以提高整个项目的编译速度,所以作为 npm 包,要转换成 es5 ,免得消费方吐槽…… 打包格式...因此如果声明了 module, 会优先读取 module 中的路径。 因此, 在导出的时候,同时设置好 main 和 module 字段,这样就可以二者兼具了,在node端,浏览器端都可以正常使用。...大家都知道,webpack 的 target 没有支持 esm 模式, 而 rollup 提供了, 为此很多人也在吐槽,为什么 webpack 不做…… 我们这使用的是 iceworks , 源码地址[...副作用:一个函数会、或者可能会对函数外部变量产生影响的行为。...对于公用的依赖包,将其写入 peerDependencies 中。 3. 若要提供 umd 模式, 在打包时, 将对应公用依赖写入 external 剔除对应依赖。

    1.6K20

    package.json 配置完全解读

    今天主要介绍一些常见配置,我把它们分为了 7 大类: 描述配置 文件配置 脚本配置 依赖配置 发布配置 系统配置 第三方配置 1..../index.mjs" } } } 为什么要加一个层级,把 require 和 import 放在 "." 下面呢? 因为 exports 除了支持配置包的默认导出,还支持配置包的子路径。..."devDependencies": { "webpack": "^5.69.0" } peerDependencies 同伴依赖,一种特殊的依赖,不会被自动安装,通常用于表示与另一个包的依赖与兼容性关系来警示使用者...比如我们安装 A,A 的正常使用依赖 B@2.x 版本,那么 B@2.x 就应该被列在 A 的 peerDependencies 下,表示“如果你使用我,那么你也需要安装 B,并且至少是 2.x 版本”...需要注意的是,这个字段数组中的值必须是在 dependencies,devDependencies 两个里面声明过的依赖才行。

    2.6K22

    包管理工具Yarn的使用和命令总结

    我本人在实际运用场景中,也经常使用 yarn 在安装或删除依赖文件,使用 npm 运行项目中定义的如:启动命令,打包命令等,所以二者完全可以同时使用。 二.Yarn的安装和命令 1....和 optionalDependencies的区别: 在一个Node.js项目中,package.json几乎是一个必须的文件,它的主要作用就是管理项目中所使用到的外部依赖包,同时它也是npm命令的入口文件...显示依赖bin文件夹的位置 yarn cache 管理用户目录中的依赖缓存 yarn check 验证当前项目中程序包依赖项 yarn config 管理依赖配置文件 yarn create 创建Yarn...why 显示有关为什么安装依赖的信息 yarn workspace Yarn的工作区信息 yarn workspaces Yarn的所有工作区信息 5. npm 和 yarn混合使用 在平时的开发中...作为开发者,希望大家可以多了解一些工具的使用方法和特性,到时候真正使用的时候才会得心应手。我在这里求一个关注、点赞、收藏、评论。拜托了,这对我真的很重要! ----

    1.4K20

    一文搞懂peerDependencies

    为什么说奇怪呢?是因为这个工程之前是可以运行的,我重新装了一遍依赖之后就不能跑了,真是喜闻乐见了。...这里提示我说我使用的库可能错误地指定 react 作为 dependency(而不是 peer dependency)。...很好,这里出现了一个 package.json 中的配置项叫做 peerDependencies,正常开发中我们经常接触到 dependencies 和 devDependencies, 那么 peerDependencies...初识peerDependencies peerDependencies 在我们进行一些插件开发的时候会经常用到,比如 jQuery-ui 的开发依赖于 jQuery,html-webpack-plugin...总结一下有如下特点: 插件正确运行的前提是,核心依赖库必须先下载安装,不能脱离核心依赖库而被单独依赖并引用; 插件入口api 的设计必须要符合核心依赖库的规范; 插件的核心逻辑运行在依赖库的调用中; 在项目实践中

    87920

    --save-dev和--save的区别

    所以,安装依赖的时候如果没有加上要依赖到开发还是线上,只是临时的在node_modules里面帮你下载,而devDependencies和dependencies的依赖都会帮你下载。...然后我在devDependencies下安装依赖: "devDependencies": { "html-webpack-plugin": "^4.0.3", "jquery": "^3.4.1",...然后我在dependencies下安装依赖: "dependencies": { "html-webpack-plugin": "^4.0.3", "jquery": "^3.4.1", "webpack...接着我在node_modules把follow-redirects、debugs、ms都删了,把axios里面的package.js的dependencies给删了,然后执行npm install,发现没有下载...我把node_modules删除,执行npm install,这几个包又都下载下来了。 最后得出 的结论是,--save-dev和--save在平时开发的时候,对于打包部署上线是没有任何影响的。

    1.3K10

    你真的了解package.json吗?

    这是@organization/package 的形式。但是这种形式时候需要花钱的。 如果将包发布到 npmjs,则 name 属性是必需的并且必须是唯一的。...但是呢,由于我们项目开发时,可以随意引入外部包,有的同学也会将在开会环境中起作用的包安装到dependencies中。这样,无形中增加我们生产环境的外部资源容量。...当某个包 A 声明了它的 peerDependencies,它实际上是在声明:“我期望运行时环境中会有某个包 B 的特定版本,但我不会直接将 B 包添加为我的依赖项,而是期望它由运行时环境或其他上层的包提供...这比直接把依赖设置为 optionalDependencies 要好,因为这样所有的 peerDependency 都聚集在 peerDependencies 字段中,而不会分散在两个地方。...,而不是作为外部依赖被安装。

    24710

    你真的了解package.json吗?

    这是@organization/package 的形式。但是这种形式时候需要花钱的。 如果将包发布到 npmjs,则 name 属性是必需的并且必须是唯一的。...但是呢,由于我们项目开发时,可以随意引入外部包,有的同学也会将在开会环境中起作用的包安装到dependencies中。这样,无形中增加我们生产环境的外部资源容量。...当某个包 A 声明了它的 peerDependencies,它实际上是在声明:“我期望运行时环境中会有某个包 B 的特定版本,但我不会直接将 B 包添加为我的依赖项,而是期望它由运行时环境或其他上层的包提供...这比直接把依赖设置为 optionalDependencies 要好,因为这样所有的 peerDependency 都聚集在 peerDependencies 字段中,而不会分散在两个地方。...,而不是作为外部依赖被安装。

    12310

    从 UNMET PEER DEPENDENCY 中理解依赖版本管理

    4、peerDependencies peerDependencies 用于指定你当前的插件兼容的宿主必须要安装的包的版本。...peerDependencies尽管指定了使用某些插件时,必须要安装的包的版本。...或者这么说,开发者已经很久没对peerDependencies这个字段进行更新了,像我们在描述间接依赖的时候,A包可能在peerDependencies这个字段里面,制定我们的lodash必须安装^2.2.0...实际上,也确实如此,在我的项目中,遇到了stylelint-webpack-plugin的0.10.5版本,显然它的peerDependencies是包含了stylelint,并通过警告的方式,要求我安装一个低版本的...在最初遇到这个问题的时候,我查阅了很多资料,最后发现仅仅是npm设计上的一些怪异之处。但在过程中其实对package.json,扁平结构和lock等设计都有了崭新的认识。

    5.2K20

    关于前端大管家package.json,你知道多少

    三、依赖配置 通常情况下,我们的项目会依赖一个或者多个外部的依赖包,根据依赖包的不同用途,可以将他们配置在下面的五个属性下:dependencies、devDependencies、peerDependencies...这时,用户要是将 1.0 版本的 B 的实例传给 A,就会出现问题。因此,需要一种机制,在模板安装的时候提醒用户,如果 A 和 B 一起安装,那么 B 必须是 2.0 模块。...需要注意,这个字段数组中的值必须是在 dependencies, devDependencies 两个里面声明过的包才行。...或者链接到本地的 node_modules/.bin / 文件中,以便在本项目中使用。 5. files files 配置是一个数组,用来描述当把 npm 包作为依赖包安装时需要说明的文件列表。...需要注意: man 文件必须以数字结尾,如果经过压缩,还可以使用. gz 后缀。这个数字表示文件安装到哪个 man 节中; 如果 man 文件名称不是以模块名称开头的,安装的时候会加上模块名称前缀。

    1.5K20

    Webpack 踩坑记 - 配置 externals 和 output

    但学习成本也跟着上去了,其中一件让人头疼的是输出时的配置,特别容易让人迷惑; 平时用 webpack 可能不会有太大问题,可一旦你开发的包被别人引用的时候,就会存在问题;我最近遇到这么一个场景耗费我很多时间去重新学习...1、场景 当你开发的包依赖较大的第三方包(react、react-dom) 的时候,你一般是把这些大的第三方包 externals 出去: { externals: { 'react': '...先看一下 webpack 官方在进行打包时候,是根据 package.json 中的 mainFields 字段指定依据哪个字段中的 路径 找到第三方包的,而 externals 字段则是指定以何种方式引入第三方包...客观情况如下: 我们通常的是会把打出来的包放在 browser 字段中; webpack 打包时,选择依赖包是根据 resolve.mainFields 字段找到指定的路径把代码打进去的;默认配置是...: 在上述的 externals 中新增 B 包的 externals 配置项(需要区别 {'B': 'B'} 和 {'B': 'extB'}) 在页面中引入 cdn 资源 http://xxx/index.umd.js

    3.7K20

    手把手教你撸一个 Webpack Loader

    正如它宣传的一样,webpack 能把左侧各种类型的文件(webpack 把它们叫作「模块」)统一打包为右边被通用浏览器支持的文件。webpack 就像是魔术师的帽子,放进去一条丝巾,变出来一只白鸽。...在 webpack 的定义中,loader 导出一个函数,loader 会在转换源模块(resource)的时候调用该函数。...我这里收集了三种配置方法,任你挑选。 单个 loader 的配置 增加 config.module.rules 数组中的规则对象(rule object)。...),我们必须声明这些外部资源的信息。...总结一下,一个 loader 在我们项目中 work 需要经历以下步骤: 创建 loader 的目录及模块文件 在 webpack 中配置 rule 及 loader 的解析路径,并且要注意 loader

    1K40

    因为使用peerDependencies而引发的bug

    我们继续使用Vue CLI作为插件搭建环境,对此不熟悉的开发者请移步我的另一篇文章:使用CLI开发一个Vue3的npm库 vue create test-vue3-project 项目创建完成后,我把相关文件拷贝了过去...解决问题 那么,既然找到问题了,我们反过来,把右键菜单的peerDependencies下的两个包放到dependencies下,再看看问题能否得到解决。...dependencies dependencies是package.json中的一个属性,里面放运行代码时所需的依赖,在install时这些包会被安装,打包项目时,这里面的包也会被打包进去。...如果将依赖包放在peerDependencies下,对插件开发者是不友好的,会出现下述问题: install的时候,所需的依赖不会安装,使用ide开发时会报错找不到相关依赖。...既然dependencies中的依赖包只要和调用者的版本号一致,就不需要重新安装依赖,那我们把它的版本号放开,给个范围,这样不就可以了 在package.json中的版本号可以带下述符号: ~波浪号,匹配最新补丁版本号

    93820

    如何规范地发布一个现代化的 NPM 包?

    或许在将来的某一天,你的库只需要输出 esm。 你可能已经注意到,umd 已经与 CommonJS 模块加载器兼容 —— 所以为什么还要同时具备 cjs 和 umd 输出呢?...但是,创建类型并不意味着你必须使用 TypeScript 来编写你的库。 一种选择是继续在源代码中使用 JavaScript,然后通过 JSDoc 注释来支持类型。...外置框架 不要将 React、Vue 等框架打包在你的库中 当构建的库依赖某个框架(例如 React、Vue 等),或是作为另一个库的插件,你可能需要将框架配置到“externals”中。...举个例子,如果你使用 TypeScript,你可以创建两个版本的包代码: 通过在 tsconfig.json 中设置 "target"="esnext",生成一个用现代 JavaScript 的 esm...配置 package.json package.json 中有许多重要的配置字段值得讨论;我在这里将着重讨论其中最为重要的一些,这还有很多额外的字段,你同样可以进行配置。

    2.3K20

    你不知道的npm

    这种依赖的作用是提示宿主环境去安装插件在peerDependencies中所指定依赖的包,用于解决插件与所依赖包不一致的问题。 听起来可能没有那么好理解,举个例子来说明下。...在安装插件的时候,peerDependencies 在npm 2.x和npm 3.x中表现不一样。npm2.x 会自动安装同等依赖,npm3.x 不再自动安装,会产生警告!...需要注意的是,在bundledDependencies中指定的依赖包,必须先在 dependencies 和 devDependencies 声明过,否则打包会报错。...如果想要指定钩子,必须严格按照 pre 和 post 前缀来添加。 环境变量 npm 脚本有一个非常强大的功能,就是可以使用 npm 的内部变量。...这个时候的 foo 配置值将覆盖所有其他来源存在的 foo 配置值。 环境变量 如果 env 环境变量中存在以npm_config_为前缀的环境变量,则会被识别为 npm 的配置属性。

    1.4K50

    现代 JavaScript 库打包指南

    或许在将来的某一天,你的库只需要输出 esm。 你可能已经注意到,umd 已经与 CommonJS 模块加载器兼容 —— 所以为什么还要同时具备 cjs 和 umd 输出呢?...但是,创建类型并不意味着你必须使用 TypeScript 来编写你的库。 一种选择是继续在源代码中使用 JavaScript,然后通过 JSDoc 注释来支持类型。...外置框架 不要将 React、Vue 等框架打包在你的库中 当构建的库依赖某个框架(例如 React、Vue 等),或是作为另一个库的插件,你可能需要将框架配置到“externals”中。...举个例子,如果你使用 TypeScript,你可以创建两个版本的包代码: 通过在 tsconfig.json 中设置 "target"="esnext",生成一个用现代 JavaScript 的 esm...配置 package.json package.json 中有许多重要的配置字段值得讨论;我在这里将着重讨论其中最为重要的一些,这还有很多额外的字段,你同样可以进行配置。

    2.4K20

    超硬核|带你畅游在 Webpack 插件开发者的世界

    在我个人看来这部分知识的应用程度对于任何一位高级前端开发者而言,一定是通往架构之路必须越过的横沟。...此时,假使我需要在每次打包结束后将本次打包生成出的所有资源打包成为一个 zip 包。 之后我会将本次打包的 zip 存放到我的服务器中作为备份之类功能,当然这不重要。...原理分析 围绕 Webpack 打包过程中存在两个核心对象: compiler compiler 在 Webpack 启动打包时创建,保存着本次打包的所有初始化配置信息。...此时我可能我并没有使用 lodash 但是并没法保证该项目内其他开发者有没有使用 lodash ,当我在 externals 中配置 lodash 时就必须在 html 文件中引入 lodash 的CDN...比如 lodash 作为外部依赖模块时,我们需要从 _ 上取到它,此时我们就传入 _ 即可。 第二个参数 type 表示创建 ExternalModule 时,第一个参数对应的变量挂载在哪个对象中。

    78430

    package.json 知多少?

    Node.js 项目遵循模块化的架构,当我们创建了一个 Node.js 项目,意味着创建了一个模块,这个模块必须有一个描述文件,即 package.json。...依赖配置 我们的项目可能依赖一个或多个外部依赖包,根据依赖包的不同用途,我们将他们配置在下面几个属性下:dependencies、devDependencies、peerDependencies、bundledDependencies...在 npm2 的时候,指定上面的 peerDependencies 将意味着强制宿主环境安装 react@>=16.0.0和react-dom@>=16.0.0 的版本。...man 文件必须以数字结尾,或者如果被压缩了,以 .gz 结尾。数字表示文件将被安装到 man 的哪个部分。如果 man 文件名称不是以模块名称开头的,安装的时候会给加上模块名称前缀。...config config 字段用于配置脚本中使用的环境变量,例如下面的配置,可以在脚本中使用process.env.npm_package_config_port进行获取。

    1.9K10

    现代 JavaScript 库打包指南

    或许在将来的某一天,你的库只需要输出 esm。 你可能已经注意到,umd 已经与 CommonJS 模块加载器兼容 —— 所以为什么还要同时具备 cjs 和 umd 输出呢?...但是,创建类型并不意味着你必须使用 TypeScript 来编写你的库。 一种选择是继续在源代码中使用 JavaScript,然后通过 JSDoc 注释来支持类型。...外置框架 不要将 React、Vue 等框架打包在你的库中 当构建的库依赖某个框架(例如 React、Vue 等),或是作为另一个库的插件,你可能需要将框架配置到“externals”中。...举个例子,如果你使用 TypeScript,你可以创建两个版本的包代码: 通过在 tsconfig.json 中设置 "target"="esnext",生成一个用现代 JavaScript 的 esm...配置 package.json package.json 中有许多重要的配置字段值得讨论;我在这里将着重讨论其中最为重要的一些,这还有很多额外的字段,你同样可以进行配置。

    92730
    领券