rollup external 属性解析

最新推荐文章于 2024-08-22 14:21:56 发布
最新推荐文章于 2024-08-22 14:21:56 发布
阅读量1.7w 收藏 7
点赞数 2
分类专栏： roll-up 前端技术 文章标签： rollup external
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29722281/article/details/95596372
版权
当使用Rollup打包项目并希望排除第三方库如jQuery时，需要使用`external`属性。未配置`external`会导致第三方库被打包进最终文件，增加体积。配置后，需指定全局模块名以避免警告，例如配置jQuery的全局名称为`'jquery'`，从而保持输出文件的大小。了解并正确使用`external`属性是优化Rollup打包过程的关键。
摘要由CSDN通过智能技术生成

一、原因

使用rollup打包，比如我们在自己的库中需要使用第三方库，例如jquery等，又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。

二、示例

现在有一个示例项目，可以用作测试。直接运行npm run build 打包出的文件行数为170行。

在这里插入图片描述
现在我们要在项目中引用jquery。

在package.json中添加jquery dependencies :

"dependencies": {
    "jquery": "^3.2.1"
  },

然后我们在待打包的某个文件(示例文件为Animal.js)添加jquery引用：

在这里插入图片描述

1 不配置external属性：

我们再次运行npm run build ，发现jquery包被打包进了我们最终生成的文件中：

最低0.47元/天 解锁文章
追逐、
关注
专栏目录
前端build工程的时候 出现 `build.rollupOptions.external 的解决方法
码农研究僧的博客
08-13 344
看到这个Bug，理性分析： 遇到 Rollup failed to resolve import “@vue/devtools-api” 错误可能是由于 Pinia 使用了 @vue/devtools-api 模块，而 Vite 的 Rollup 插件无法解析这个模块 ps：但是我前一秒还可以，加了个别代码，突然不行，我是不相信的 = - =
vite build.rollupoptions.external
qq_36437991的博客
10-20 5007
vite打包报错
Rollup看这一篇就够了
lxk116688的博客
08-20 2812
rollup官方有这样一句话：Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library（库） 或应用程序。这个其实是所有打包工具的功能，但是Rollup有什么不一样的呢？从他的应用场景来看，用到RollUp打包的都有vue/ vuex/ vue-router，对比webpack来看，Element UI是使用webpack作为打包的，相对来说，Rollup更擅长做一些js函数库、工具库的打包，但是Webpack更擅长处理UI库。
rollup的五大核心配置
jieyucx的博客
07-22 1619
到这里大家是不是想到了一个老朋友，，这些配置看上去是不是很像，哈哈哈总的来说，是构建现代JavaScript应用程序的强大工具。在本文中，我们介绍了五个基础配置，包括输入文件、输出文件、插件、外部依赖和模式。这些配置可以帮助我们快速创建优化的JavaScript应用程序。但是，这只是的冰山一角。还有很多高级配置和技巧可以使用，比如代码拆分、动态导入等等。了解的所有特性和细节需要时间和经验，但是这些基础配置可以帮助我们快速开始并建立基础。希望这篇博客能够对你有所帮助，祝你在使用构建JavaScript。
rollup打包剥离第三方库， external
qlin_11的博客
09-07 4467
使用rollup打包，我们在自己的库中需要使用第三方库，例如lodash等，又不想在最终生成的打包文件中出现jquery。这个时候我们就需要使用external属性。比如我们使用了lodash， import _ from 'lodash' // rollup.config.js { input: 'src/main.js', external: ['lodash'], globals: { lodash: '_' }, output: [
【实战篇】最详细的Rollup打包项目教程
小陈的博客
09-22 1万+
自动将 dependencies 依赖声明为 externals支持处理外部 npm 依赖支持基于 CommonJS 模块引入支持 typescript，并导出声明文件支持 scss，并添加前缀支持自动清除调试代码打包输出文件保留原始模块结构支持按需加载rollup是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。rollup为什么是rollup而不是webpack呢？rollup的特色是ES6模块和代码，这些webpack。
rollup-plugin-peer-deps-external:自动外部化汇总套件中的“ peerDependencies”
05-14
汇总插件对等Deps外部 自动外部peerDependencies rollup捆绑包中的peerDependencies 。 动机 当使用捆绑库时，我们通常要避免包含因为它们应该由库的使用者提供。 通过排除这些依赖关系，我们可以减小捆绑包的大小，并避免捆绑重复的依赖关系。 我们可以使用汇总配置选项来实现此目的，为它提供要从捆绑包中排除的对等依赖项列表。 该插件可自动执行该过程，并自动将库的peerDependencies添加到external配置中。 安装 npm install --save-dev rollup-plugin-peer-deps-external 用法 // Add to plugins array in rollup.config.js import peerDepsExternal from 'rollup-plugin-peer-deps-external'
rollup入门学习（一）
Jason_yuxuan的博客
11-06 3877
**Rollup是JavaScript的模块绑定器**，它将小段代码编译成更大更复杂的代码，比如库或应用程序。
rollup详细使用教程
热门推荐
yutao618的博客
04-29 1万+
rollup（下一代ES模块捆绑器）是什么请查看官网介绍 注意不要看Rollup.js 中文网，因为这是别人翻译的，不是实时更新的，我之前看这个老是安装出错 之前在网络上查找过相关的rollup使用，有些文章很概念不易理解，没有具体步骤；有些文章步骤不够详细，没有来龙去脉。所以打算整理个文章给后来者减少弯路。我保证此文真的是手把手教学，很接地气，因为我是边建工程边使用边写文章，不是某个项目里的代码，所以代码清晰，没有冗余。 为什么不用webpack 一说到打包工具大家都想到webpack，因为我们用.
rollup 打包一个组件库
阿臻
01-07 502
为什么说这个的使用呢，我在基于 element plus 构建组件的时候报错，搜索到解决方案是使用 commonjs，但是打包出的依赖太多，一个 tabs 组件就包含了 loadsh，最终弃用了element plus。
vite-plugin-external-worker:用于捆绑外部（非内联）网络工作者的 Vite 插件
05-30
vite-plugin-external-worker 已弃用Vite 2.0+ 现在支持直接使用 Rollup 插件。 插件，允许非内联捆绑 web worker，允许在主入口点和 worker 之间进行代码拆分。 设置 使用您选择的包管理器安装它 : npm i -D vite-plugin-external-worker : pnpm i -D vite-plugin-external-worker yarn add -D vite-plugin-external-worker 将它添加到您的vite.config.js文件中 import worker from 'vite-plugin-external-worker' ; export default { plugins : [ worker ( ) , ] , } ; 使用?worker=ex
Rollup常用配置及插件
weixin_28750673的博客
01-03 4111
常用配置 input // 入口文件 input: 'bundle.js' output // 打包配置 // format: amd, cjs, es, iife, umd, system // dir 打包输出目录 // entryFileNames entry-[name].js 动态打包 // sourcemap // file ${name}.umd`}.js // globals 定义全局变量命名 plugins [ url(), // xxx.. ] external //
Rollup打包React组件库并发布到npm私服
huhaiqing106的博客
11-25 1329
背景 公司的前端组件库经过前端好几位大佬搞了个基于React、Ant design二次扩展的库，之前设想是每个业务模块基于公共的组件库维护各自的业务组件库，经过几个周期之后，发现已经不可控了，每个业务模块的Ant design版本不一样，而且各自基于公共又搞了一套自己的库，为了收紧口子跟后期的维护扩展，决定把公共库打包发布到npm私服，然后install到各自业务线，确保各业务线一致，这是背景 打包 在这之前有使用rollup打包的经验，这里也计划用rollup来实现，这过程中碰到了不少问题，查阅相关资料发
VUE 3.0 源码 rollup.config.js 文件整体功能介绍
roywang6的博客
12-22 1302
文件路径：VUE 3.0 源码 /rollup.config.js 上一篇文章中，单独介绍了各种类型的输出文件的差异，今天这篇文章将完整的介绍一下该配置文件 一、rollup.config.js 配置信息时如何生效的？ scripts/dev.js | scripts/build.js 文件中都有这么一个函数： execa( 'rollup', [ '-c', '--environment', [ // ... ], ]) 关键就在 '-c' 这个参数上：作用是rollup打包指定使用配置文件
Vite 学习（三） - rollup & esbuild 基础学习
weixin_41364787的博客
02-13 3708
本小节介绍了 rollup 和 esbuild 的基础用法和插件开发机制
vite里的Rollup打包配置
最新发布
青蛙king的博客
08-22 1314
在使用 vite 配置其 build 属性时，我们可以通过 build.rollupOptions 来自定义底层的 Rollup 打包配置（
Vite打包性能优化及填坑
热爱可抵岁月漫长
08-31 1360
到了这一步，整个文件夹已经完全瘦身了。从一开始的30MB到现在的11.8MB了。我们在项目里面放置了许多json数据(因为业务原因不能上传到服务器)，json数据已经占了差不多5、6mb的原因，所以是一个单纯的项目并没有这么大。
rollup的cache属性怎么使用
06-02
其中一个选项就是`cache`属性，它可以让Rollup在重新构建时重用之前的结果，从而提高构建效率。 使用`cache`属性很简单，只需在Rollup的配置文件中将其设置为`true`即可： ```javascript // rollup.config.js ...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值