c2c网站的特点,做网站最适合用多大的图片,大丰建站,右玉网站建设✨专栏介绍
Rollup专栏是一个专门介绍Rollup打包工具的系列文章。Rollup是一个现代化的JavaScript模块打包工具#xff0c;它可以将多个模块打包成一个或多个文件#xff0c;以提高应用程序的性能和加载速度。
在Rollup专栏中#xff0c;您将学习到如何安装和配置Rollup它可以将多个模块打包成一个或多个文件以提高应用程序的性能和加载速度。
在Rollup专栏中您将学习到如何安装和配置Rollup以及如何使用它来打包JavaScript模块。我们将深入探讨不同类型的模块如CommonJS、ES6等的处理方式以及如何处理依赖关系和循环引用。
此外我们还将介绍一些常用的插件和配置选项以帮助您更好地使用Rollup。您将学习到如何使用动态导入来实现按需加载如何优化打包结果以减小文件大小并了解与其他工具如Babel、TypeScript等集成使用的技巧。
通过阅读Rollup专栏您将掌握使用这个强大工具的基本知识并学会一些高级特性和技巧。让我们一起开始吧 文章目录 ✨专栏介绍引言rollup/pluginutils介绍插件上下文自定义插件JSON插件示例图片读取总结 写在结尾 引言
Rollup是一个JavaScript模块打包器它可以将多个模块打包成一个单独的文件以便在浏览器中使用。与其他打包工具相比Rollup的主要优势在于它可以生成更小、更快的代码。在本文中我们将深入了解Rollup的插件开发。
rollup/pluginutils介绍
rollup/pluginutils是一个官方提供的Rollup插件开发工具库它提供了一些实用的函数和工具用于简化插件开发过程中的一些常见任务。
该工具库提供了以下常用的函数和工具方法 createFilter(include?: string | RegExp | (string | RegExp)[], exclude?: string | RegExp | (string | RegExp)[]): FilterPattern 用于创建一个过滤器可以根据指定的包含和排除规则来过滤文件。可以传入字符串、正则表达式或字符串/正则表达式数组作为参数。返回一个函数该函数接受文件路径作为参数并返回一个布尔值表示该文件是否应该被处理。 makeLegalIdentifier(name: string): string 用于将给定的字符串转换为合法的JavaScript标识符。主要用于处理可能包含非法字符或保留字的模块名称。 dataToEsm(data: any, options?: DataToEsmOptions): string 将给定的数据转换为ES模块导出语法的字符串。可以传入选项对象来自定义导出语法。 attachScopes(ast: any, scope: Scope): void 将作用域信息附加到AST抽象语法树节点上。可以帮助插件在处理代码时正确地处理变量作用域。
这些函数和工具可以帮助开发者更方便地处理文件过滤、标识符转换、数据转换和作用域处理等常见任务提高插件开发的效率和可靠性。
插件上下文
插件上下文
这个其实也是插件中很常用的一些api可以通过 this 从大多数钩子中访问一些实用函数和信息位。
自定义插件
rollup-plugin-custom
import { createFilter } from rollup/pluginutils;
import path from path;export default function customPlugin(options {}) { const filter createFilter(options.include, options.exclude);return {name: custom-plugin,transform(code, id) { if (!filter(id)) { return null;}const parsedCode this.parse(code);const source ${code} \n\n ${JSON.stringify(parsedCode, null, 2)};const fileName path.basename(id, path.extname(id));console.log(fileName);if (options.emitFile) { this.emitFile({type: asset,fileName: fileName .txt,source})}}}}首先通过 createFilter 函数创建一个过滤器用于确定哪些文件需要被处理。options.include 和 options.exclude 分别指定了需要包含和排除的文件。
然后返回一个对象其中包含了插件的名称和一个 transform 方法。transform 方法会在每个模块被转换时调用。 在 transform 方法中首先使用过滤器检查当前模块是否需要处理。如果不需要处理则返回 null。
接下来使用 this.parse(code) 方法解析代码并将解析结果与原始代码拼接成一个新的字符串 source。 然后使用 path.basename(id, path.extname(id)) 获取当前模块的文件名不包含扩展名并打印输出。 如果设置了 options.emitFile 为 true则调用 this.emitFile() 方法将处理后的代码作为一个 asset 文件输出。输出的文件名为当前模块的文件名加上 .txt 扩展名。
最后这个插件可以通过在 Rollup 配置文件中引入并添加到插件列表中来使用。
rollup.config.mjs
import { defineConfig } from rollup;
import customPlugin from ./plugins/rollup-plugin-custom.js;export default defineConfig({input: src/index.js,output: {dir: dist,format: esm,sourcemap: true,},plugins: [customPlugin({emitFile:true})],
});
JSON插件示例
rollup默认是不能直接读取json文件的内容的我们自己写一个插件处理一下。
安装
npm install rollup/plugin-commonjs rollup/plugin-node-resolve rollup/pluginutils -Drollup-plugin-json
import { createFilter,dataToEsm } from rollup/pluginutils;
import path from path;export default function myJson(options {}) {// rollup 推荐每一个 transform 类型的插件都需要提供 include 和 exclude 选项生成过滤规则const filter createFilter(options.include, options.exclude);return {name: rollup-plugin-json,transform: {order: pre,handler(code, id) {if (!filter(id) || path.extname(id) ! .json) return null;try {const parse JSON.stringify(JSON.parse(code));return {// dataToEsm 将数据转换成esm模块// 其实就是 export default xxxcode: dataToEsm(parse), map: { mappings: }};} catch (err) { const message Could not parse JSON file;this.error({ message, id, cause: err });return null;}}}};
}首先通过 createFilter 方法创建一个过滤器用于确定哪些文件需要被处理。options.include 和 options.exclude 分别指定了需要包含和排除的文件。
然后返回一个对象其中包含了插件的名称和一个 transform 对象。transform 对象中有两个属性order 和 handler。
order: pre 表示这个插件在转换过程中应该在其他插件之前执行。handler(code, id) 是一个处理函数它会在每个模块被转换时调用。
在 handler 函数中首先使用过滤器检查当前模块是否需要处理并且判断当前模块是否是 JSON 文件。如果不需要处理或者不是 JSON 文件则返回 null。
接下来尝试将代码解析为 JSON 对象并使用 dataToEsm(parse) 方法将解析后的对象转换为 ES 模块格式的代码。然后返回一个对象其中包含了转换后的代码和一个空的 Source Map。
如果解析过程中出现错误则会捕获错误并通过调用 this.error() 方法抛出错误信息并返回 null。
最后这个插件可以通过在 Rollup 配置文件中引入并添加到插件列表中来使用。它会在构建过程中将 JSON 文件转换为 ES 模块格式的代码。
页面使用
import pkg from ../package.json;
console.log(pkg.name)图片读取
mini-svg-data-uri是一个用于将SVG图像转换为mini data URI格式的JavaScript库。它可以将SVG图像的内容转换为base64编码并生成一个data URI以便在HTML或CSS中直接使用。
安装mini-svg-data-uri
npm install mini-svg-data-uri -Drollup-plugin-image
import { createFilter,dataToEsm } from rollup/pluginutils;
import { extname,resolve,basename,relative,normalize,sep } from path;
import fs from fs;
import svgToMiniDataURI from mini-svg-data-uri;const defaults {fileSize: 1024 * 4,target: ./dist,include: null,exclude: null,
}const mimeTypes {.png: image/png,.jpg: image/jpeg,.jpeg: image/jpeg,.gif: image/gif,.svg: image/svgxml,.ico: image/x-icon,.webp: image/webp,.avif: image/avif
}const getDataUri ({ format, isSvg, mime, source }) isSvg ? svgToMiniDataURI(source) : data:${mime};${format},${source};const ensureDirExists async (dirPath) { try {await fs.promises.access(dirPath);return true;} catch (err) { // 文件夹不存在就创建文件夹try {await fs.promises.mkdir(dirPath, { recursive: true });return true;}catch (err) { console.error(err);return false;}}
}export default function myImage(opts {}) { const options Object.assign({}, defaults, opts);const filter createFilter(options.include, options.exclude);return {name: my-image,async transform(code, id) { if (!filter(id)) return null;// 获取后缀const ext extname(id);// 判断是否是图片if(!mimeTypes.hasOwnProperty(ext)) {return null;}// 获取图片的mime类型const mime mimeTypes[ext];// 判断是否svgconst isSvg mime mimeTypes[.svg];// 图片format格式const format isSvg ? utf-8 : base64;// 目标路径const assetsPath resolve(process.cwd(), options.target);//获取文件名const fileName basename(id);// 最终文件路径const filePath resolve(assetsPath, fileName);let relativePath normalize(relative(process.cwd(), filePath));relativePath relativePath.substring(relativePath.indexOf(sep) 1);try {// 如果图片文件过大就应该直接拷贝文件返回文件路径// 读取图片文件大小与设置的大小进行比较const stat await fs.promises.stat(id);if (stat.size options.fileSize) {// 文件的拷贝以及对象的返回// 文件拷贝无非就是文件源路径目标路径// copyFile 拷贝文件地址的文件夹必须存在// 如果文件夹不存在那么就创建文件夹const dirExists await ensureDirExists(assetsPath);dirExists await fs.promises.copyFile(id, filePath);return {code: dataToEsm(relativePath), //返回拷贝之后处理的路径map: { mappings: }}} else {// 否则转换为base64格式// 读取文件const source await fs.promises.readFile(id, format);return {code: dataToEsm(getDataUri({ format, isSvg, mime, source })),map: { mappings: }}}} catch (err) { const message 图片转换失败: id;this.error({ message, id, cause: err });return null;}}}
}createFilter(include, exclude): 这个函数来自于rollup/pluginutils包用于创建一个过滤器函数根据给定的include和exclude规则来判断文件是否需要被处理。extname(id): 这个函数来自于path模块用于获取文件路径的扩展名。resolve(...paths): 这个函数来自于path模块用于将多个路径片段解析为绝对路径。basename(path): 这个函数来自于path模块用于获取文件路径的基本名称不包含目录部分。relative(from, to): 这个函数来自于path模块用于获取从一个路径到另一个路径的相对路径。normalize(path): 这个函数来自于path模块用于规范化给定的路径字符串。sep: 这是一个常量表示操作系统特定的路径分隔符例如在Windows上是反斜杠。fs.promises.access(path): 这是一个Promise-based API用于检查指定路径是否可访问。fs.promises.mkdir(path, options): 这是一个Promise-based API用于创建指定路径的目录。options参数可以包含递归选项以便创建多级目录。fs.promises.stat(path): 这是一个Promise-based API用于获取指定路径的文件信息例如文件大小。fs.promises.copyFile(src, dest): 这是一个Promise-based API用于将源文件复制到目标文件。fs.promises.readFile(path, encoding): 这是一个Promise-based API用于读取指定路径的文件内容。encoding参数用于指定读取的编码格式。dataToEsm(value): 这个函数来自于rollup/pluginutils包用于将给定的值转换为ES模块导出语法。svgToMiniDataURI(svg): 这个函数来自于mini-svg-data-uri包用于将SVG图像转换为mini data URI格式。
在插件的transform方法中首先使用过滤器函数判断是否需要处理当前文件。然后根据文件扩展名判断是否为图片文件并获取对应的MIME类型。接下来根据配置的目标路径和文件名构建最终的文件路径。如果图片文件大小超过了设置的阈值则直接拷贝该文件到目标路径并返回拷贝后的路径。否则将图片内容转换为base64格式并返回对应的data URI。
rollup.config.mjs
import { defineConfig } from rollup;
import imagePlugin from ./plugins/rollup-plugin-image.jsexport default defineConfig({input: src/index.js,output: {dir: dist,format: esm,sourcemap: true,},plugins: [imagePlugin({fileSize: 1024 * 10,target: ./dist/assets})],
});
总结 Rollup插件机制允许开发者通过编写自定义插件来扩展Rollup的功能。 插件是由一个或多个钩子函数组成的钩子函数定义了在打包过程中的不同阶段执行的操作。 常用的钩子函数有options、resolveId、load、transform和generateBundle每个钩子函数都有特定的调用时机和参数。 插件可以通过返回一个Promise对象来处理异步操作。 Rollup插件可以使用第三方库来辅助开发例如rollup-pluginutils用于创建过滤器。 开发者可以根据自己的需求编写自定义插件并将其添加到Rollup配置中以实现各种功能扩展例如压缩代码、处理CSS、加载和解析JSON等。 插件开发需要注意性能和代码质量避免不必要的操作和副作用。
通过使用Rollup插件机制开发者可以灵活地定制打包过程并根据项目需求添加各种功能扩展。这使得Rollup成为一个强大而灵活的JavaScript模块打包工具。 写在结尾
前端设计模式专栏 设计模式是软件开发中不可或缺的一部分它们帮助我们解决了许多常见问题并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中我们介绍了所有的前端设计模式包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式并将其应用于实际项目中我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式写出高质量的代码。点击订阅前端设计模式专栏
Vue专栏 Vue.js是一款流行的JavaScript框架用于构建用户界面。它采用了MVVMModel-View-ViewModel的架构模式通过数据驱动和组件化的方式使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面并探索其强大的生态系统如Vue Router和Vuex、Pinia。通过学习这些内容你将能够成为一名熟练的Vue.js开发者并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏
JavaScriptES6专栏 JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点是构建现代Web应用程序的重要工具之一。在这个专栏中我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外我们还将介绍ES6ECMAScript 2015及其后续版本中引入的新特性如箭头函数、模块化、解构赋值等。通过学习这些内容你将能够成为一名熟练的JavaScript开发者并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScriptES6专栏
