首页
学习
活动
专区
工具
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 也无可厚非。

50730

这还是最熟悉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 。

43110
  • 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.4K22

    一文搞懂peerDependencies

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

    85920

    包管理工具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

    --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_modulesfollow-redirects、debugs、ms都删了,axios里面的package.jsdependencies给删了,然后执行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 字段,而不会分散两个地方。...,而不是作为外部依赖被安装。

    21810

    你真的了解package.json吗?

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

    11710

    关于前端大管家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

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

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

    4.9K20

    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.6K20

    因为使用peerDependencies而引发bug

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

    91020

    手把手教你撸一个 Webpack Loader

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

    1K40

    如何规范地发布一个现代化 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.2K20

    你不知道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

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

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

    77430

    现代 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

    现代 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 中有许多重要配置字段值得讨论;在这里将着重讨论其中最为重要一些,这还有很多额外字段,你同样可以进行配置

    92230

    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
    领券