前言
在编写前端代码的过程中，我们有时需要引入一些图片、音频等资源文件。然而，直接引用这些文件不仅会增加页面的加载时间，而且在部署时也会增加额外的网络流量。为了避免这种情况，我们可以将这些资源转化为 base64 字符串或者使用 URL 引用。参考 Rollup 官方文档，它推荐使用 @rollup/plugin-url 插件。
在本文中，我们将重点讲解如何使用 @rollup/plugin-url 处理资源文件和图片，并且展示它在开发中的应用场景。
安装
可以使用 npm 安装 @rollup/plugin-url 插件。
npm install --save-dev @rollup/plugin-url
使用
接下来，我们将详细讨论如何使用该插件。
首先，我们需要在 rollup.config.js 文件中引入 @rollup/plugin-url 模块，并在 plugins 中配置。
-- -------------------- ---- -------
------ --- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
-- -- ----------
-----
------ -- -- ------------- ----
-------- ------------- -- --------
---------- ---- -- ----------------
--
-
-然后，我们可以在代码中使用 import 引入相关的资源文件，并在需要时将其转化为 URL 或者 base64 字符串。
-- -------------------- ---- ------- -- ---- --- -- ------ ---- ---- -------------------- -- -- --- ----- ----- --- - --- -------- ------- - ----- ------------------------------- -- ------- ------ --- ------------------
现在，我们讲解每个参数的含义，以及它们的用法：
limit
该配置项用来限制对文件的处理大小，单位是 Byte。文件大小超出限制的将不会被处理。默认值是 0，表示所有资源文件都会被处理。
// 仅处理小于 8192 Byte 的文件
url({
limit: 8192
})include 和 exclude
这两个配置项定义了哪些文件需要被处理或者排除在外。它们都是基于 micromatch 模块创建的字符串数组。
-- -------------------- ---- ------- -- -------------- ----- -------- ------------ -- -- -------------- ----- -------- ---------------------- --
publicPath
该参数定义了输出的 URL 的前缀，以使所有资源都指向正确的路径。默认情况下，publicPath 会根据输出文件的文件名自动设置。
// 指定输出的 URL 的前缀为 './assets'
url({
publicPath: './assets'
})fileName
该参数用于指定输出的文件名。默认情况下，会根据输入文件的文件名和文件类型来自动生成文件名。
// 统一使用名为 hash 的文件名
url({
fileName: 'hash'
})emitFiles
该参数用于配置是否把处理后的文件输出到输出目录。默认为 true。
// 关闭文件输出功能
url({
emitFiles: false
})示例
让我们看一个例子。我们有很多图片和音频资源，我们希望合并它们并在我们的网页上展示一个照片墙。我们的目录结构几乎如下所示：
-- -------------------- ---- -------
--- ----------
--- ------
- --- ------
- - --- -----
- - --- -----
- --- -----
- - --- -----
- - --- -----
--- ---
--- --------首先，我们需要在 rollup.config.js 中配置 @rollup/plugin-url：
-- -------------------- ---- -------
------ --- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
-----
------ ----- -- -- --- -------------
-------- ------------ ------------ -- ----- --- - --- --
---------- ----- -- ----------- --- --
--
-
-然后，我们在 src/index.js 中导入资源文件，并将其转化为 base64 字符串或者 URL，以便在网页上展示。
-- -------------------- ---- ------- -- --------- ------ -------- ---- ------------------------- ------ -------- ---- ------------------------- ------ ------ ---- ------------------------ ------ ------ ---- ------------------------ -- --------- ----- ---- - --- -------- ----- ---- - --- -------- ----- ------------ - --- -------- ----- ------------ - --- -------- -- ------------- -------- - --------- -------------------------------- -------- - --------- -------------------------------- ---------------- - ------- --------------------- - ----- ---------------------------------------- ---------------- - ------- --------------------- - ----- ----------------------------------------
现在，我们就可以在网页上播放这些音频文件并显示这些图片了。
结论
@rollup/plugin-url 插件是一个功能强大的插件，能够很好的处理前端开发中的资源文件和图片。使用它，不仅可以大大减少页面的加载时间和减轻网络流量，还可以使前端开发更加方便快捷。希望这篇文章能够帮助你学习如何使用它，也希望你在今后的开发工作中能经常使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf22b5cbfe1ea0610f9e