Rollup各组件作用

已于 2022-07-02 18:48:22 修改
阅读量937 收藏 1
点赞数
分类专栏： 笔记 文章标签： vue.js 前端 javascript
于 2022-07-02 18:18:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y1377593732/article/details/124937717
版权

Rollup

1. @rollup/plugin-node-resolve

原必须：import go from ./go/index.js
用后支持：import go from ./go
将node_modules中的内容打包到结果中

2. rollup-plugin-terser

压缩js代码

3. @rollup/plugin-replace

字符串替换

4. rollup-plugin-node-externals

排除外部引用的组件

5. rollup-plugin-visualizer

rollup的包分析工具

6. @rollup/plugin-commonjs

将commonjs转成es引用

7. rollup-plugin-serve

类似vue-cli-serve

8. rollup-plugin-vue

打包vue文件
6.0以上支持的是vue3.0

9. @rollup/plugin-html

生成html模板

10. rollup-plugin-livereload

启动热更新

11. rollup-plugin-postcss

打包css用

12. @rollup/plugin-json

支持json文件引入

anywo01
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
rollup 总结
fk1012的博客
03-29 1963
rollup 是一个 JavaScript 模块打包器，在功能上要完成的事和 webpack 性质一样，就是将小块代码编译成大块复杂的代码，例如 library 或应用程序。在平时开发应用程序时，我们基本上选择用 webpack，相比之下，rollup.js 更多是用于 library 打包，我们熟悉的 vue、react、vuex、vue-router 等都是用 rollup 进行打包的。
es6模块打包之rollup
whl0071的专栏
12-22 2808
es6模块打包之rollup
推荐项目：Rollup之友 - rollup-plugin-replace
最新发布
gitblog_00021的博客
06-06 403
推荐项目：Rollup之友 - rollup-plugin-replace 项目地址:https://gitcode.com/rollup/rollup-plugin-replace 在前端开发的快速发展中，构建工具的重要性不言而喻。今天，我要向大家推荐一个在Rollup生态中扮演关键角色的开源项目——rollup-plugin-replace。这个小而美的工具，是任何追求高效打包流程开发者的朋友...
@rollup/plugin-html 参数
CS304961760的博客
03-10 902
@rollup/plugin-html` 是一个用于生成 HTML 文件的插件。如果您指定了 HTML 模板文件，则 `@rollup/plugin-html` 会将打包生成的 JavaScript 文件插入到该模板文件中，生成最终的 HTML 文件。例如，如果资源文件位于 `public/assets` 目录中，则可以将 `publicPath` 设置为 `/assets/`，从而在 HTML 文件中的资源文件引用路径中添加前缀 `/assets/`。- 默认值: `'index.html'`
@rollup/plugin-html 详解
CS304961760的博客
12-19 977
HTML 文件的标题为 "My App"，`` 标签上带有 `lang="en"` 属性，模板中的 `APP_VERSION` 参数为 "1.0.0"，生成的 HTML 文件的 `` 中带有一个 `` 标签，指定了视口大小为设备宽度，并且会对生成的 HTML 文件进行压缩和生成 sourcemap 文件。如果未指定模板，则会使用默认的模板。- `meta`: 指定生成的 HTML 文件的 `` 标签中的 `` 标签，可以是一个对象或者一个函数。
@rollup/plugin-terser 用法
CS304961760的博客
03-10 2655
@rollup/plugin-terser` 是一个用于压缩 JavaScript 代码的插件。通过以上步骤，您现在已经可以使用 `@rollup/plugin-terser` 插件来压缩 JavaScript 代码了。2. 在 `rollup.config.js` 文件中导入 `@rollup/plugin-terser`1. 安装 `@rollup/plugin-terser` 插件。3. 在 `plugins ` 中添加 `terser` 插件。4. 配置 `terser` 插件。
package-cli-service，为构建发布npm包提供完整的工作流
知之为知之，不知为不知
04-10 332
【package-cli-service】为构建发布 npm 包的全流程提供了完整的工作流，。它是构建于rollup、 webpack之上的。它包含了：一个针对绝大部分应用优化过的内部的 rollup 配置；它提供了 serve-example、build-example、lint、fix、analyzer、build 、pub 、serve-storybook、build-storybook 等命令
基于rollup的组件库打包体积优化小结
08-27
基于Rollup的组件库打包体积优化小结 基于Rollup的组件库打包体积优化小结主要介绍了基于Rollup的组件库打包体积优化小结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。 背景 ...
rollup-example:包含多个组件的汇总示例
05-06
"rollup-example:包含多个组件的汇总示例"这个项目是演示如何使用Rollup来构建一个包含多个组件的可Treeshakable库。下面我们将详细探讨相关知识点。 1. **Rollup**: Rollup是一款模块打包器，它的主要特点是能够将...
rollup-boilerplate：使用React创建组件库的简单样板
01-31
汇总样板 使用React和Jest创建组件库的简单样板。 设计为在启动项目时快速简便。安装运行此命令以安装项目的所有依赖项。 yarn install用法建筑生产规范yarn build:prod 建筑开发规范yarn build:dev 构建开发代码并...
rollup-utils-template:使用 rollup 构建工具 组件库的起始模板，多格式支持，规范流水，即开即用，快速发布
04-29
rollup-utils-template     使用 rollup 构建工具或功能库的起始模板，代码格式规范化，即开即用快速发布，节省初始配置构建环境的时间 JavaScript | | 使用 在 src/index.{js,jsx} 入口处进行管理。 开发 yarn ...
rollup-plugin-html2:汇总插件可将捆绑的文件注入HTML模板
05-23
:warning: 该存储库未维护！ 欢迎您继续开发rollup-plugin-html2。 请与我联系，以在npmjs.org上转让所有权。 汇总插件html2 插件，用于将捆绑的文件注入HTML模板。 该插件的灵感来自和 。 rollup-plugin-html2不会列出输出目录，但会从结果包中获取条目。 此外，它还会将生成HTML文件作为资产发出，以便其他插件可以访问它。 该插件可以与一起使用。 在这种情况下， rollup-plugin-favicons前应放置rollup-plugin-html2的插件列表。 安装 npm i -D rollup-plugin-html2 用法 // rollup.config.js import html2 from 'rollup-plugin-html2' export default { input : 'index.js' , ou
rollup-plugin-terser:汇总插件可最小化生成的包
04-28
汇总插件插件 插件可最小化生成的es捆绑包。 在引擎盖下使用。 安装 yarn add rollup-plugin-terser --dev # Or with npm: npm i rollup-plugin-terser --save-dev 注意：此软件包要求rollup@0.66及更高版本（包括rollup@2.0.0） 用法 import { rollup } from "rollup" ; import { terser } from "rollup-plugin-terser" ; rollup ( { input : "main.js" , plugins : [ terser ( ) ] , } ) ; 为什么命名为出口？ 模块是一个命名空间。 默认导出通常导致每个文件的功能/组件教条，并使代码的可维护性降低。 与commonjs的互操作在很多情况下都已损
rollup-plugin-htmlvue:用于将HTMLXML转换为Vue SFC的汇总插件
05-01
rollup-plugin-htmlvue 将HTML片段和SVG导入为Vue组件。 :person_raising_hand: 为什么？ :fire: 没有与Vue编译器Comiles耦合到SFC，以便您的进行编译 :dizzy: 多功能支持任何XML可解析的标记 :rocket: 安装 npm i -D rollup-plugin-vue rollup-plugin-htmlvue :hammer_and_wrench: 设定档 rollup.config.js import vue from 'rollup-plugin-vue' ; import htmlvue from 'rollup-plugin-htmlvue' ; export default { // ... plugins : [ vue ( ) , htmlvue ( ) , ] , } 默认情况下，它仅自动解析.html文件。 要将其应用于其他扩展：
Rollup 配置生成html插件
CS304961760的博客
04-11 1026
选项接受一个函数作为参数，该函数返回一个 HTML 字符串，其中包含了模板引擎渲染出来的动态数据。占位符来插入变量或表达式，从而生成动态的 HTML 内容。要在 Rollup 中生成 HTML 文件，可以使用。
@rollup/plugin-html 使用及原理介绍
qq_42880714的博客
03-28 806
@rollup/plugin-html 使用及原理介绍
【实战篇】最详细的Rollup打包项目教程
热门推荐
小陈的博客
09-22 1万+
自动将 dependencies 依赖声明为 externals支持处理外部 npm 依赖支持基于 CommonJS 模块引入支持 typescript，并导出声明文件支持 scss，并添加前缀支持自动清除调试代码打包输出文件保留原始模块结构支持按需加载rollup是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。rollup为什么是rollup而不是webpack呢？rollup的特色是ES6模块和代码，这些webpack。
探秘Rollup优化利器：rollup-plugin-terser
gitblog_00037的博客
04-15 1182
探秘Rollup优化利器：rollup-plugin-terser 项目地址:https://gitcode.com/TrySound/rollup-plugin-terser rollup-plugin-terser 是一款基于 Rollup 的插件，用于对 JavaScript 代码进行深度压缩和优化。在 Web 应用开发中，减少文件大小是提升用户体验的关键因素之一，特别是在移动端和网络环境较...
rollup打包react组件
Hhjian524的博客
05-23 1349
rollup打包react组件
rollup 打包vue组件库
02-08
rollup 是一个 JavaScript 模块打包器，可以将多个模块合并为一个文件，并可以根据需要支持不同的模块化规范，如 CommonJS 和 ES6。 如果你想使用 rollup 来打包 Vue 组件库，你需要使用 Vue 的官方插件 vue-cli-plugin-library。 你可以在你的 Vue 项目中运行以下命令来安装 vue-cli-plugin-library 插件： ``` vue add library ``` 然后，在你的 Vue 项目的 package.json 文件中的 "scripts" 字段中添加以下命令： ``` "scripts": { "build:lib": "vue-cli-service build --target lib --name my-library src/main.js" } ``` 在命令行中运行以下命令来打包 Vue 组件库： ``` npm run build:lib ``` 打包后的组件库文件会输出到 "dist" 目录中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值