plist.js 浏览器使用指南DOMParser 条件导出如何实现零依赖 4KB 的终极优化【免费下载链接】plist.jsApple property list parser/builder for Node.js and browsers — supports XML, binary (bplist), and OpenStep formats项目地址: https://gitcode.com/gh_mirrors/pl/plist.jsplist.js 是一个面向 Node.js 与浏览器的 Apple 属性列表Property List简称 plist解析器/构建器支持XML、二进制bplist与 OpenStep三种格式。在浏览器环境中它借助原生DOMParser与条件导出机制实现零依赖打包后 gzip 体积仅约4KB。本文将带你从零开始完整掌握 plist.js 的浏览器端用法与背后的优化原理。 先认识 plist.js一个 API 搞定三种格式plist 是苹果生态的标准数据格式——macOS/iOS 应用的Info.plist、Xcode 工程配置、defaults read的输出全都是它。plist.js 提供 5 个核心 API解析时自动探测格式无需手动指定API用途parse()解析任意格式自动识别 XML / bplist / OpenStepparseBinary()直接解析二进制 plistbplist00parseOpenStep()直接解析 OpenStep 风格 ASCII plistbuild()将 JS 对象构建为 XML plist 字符串buildBinary()将 JS 对象构建为二进制 plistUint8Array解析结果统一映射为 JavaScript 原生类型非常直觉Plist 类型JavaScript 类型stringstringinteger/realnumbertrue//false/booleandateDatedataUint8Arrayarray/dictArray/Object⚡ 最快上手3 行代码完成浏览器端解析在 Vite、webpack 等打包工具中使用直接导入即可浏览器专属构建会被自动选中import { parse, build } from plist; const xml await (await fetch(Info.plist)).text(); const obj parse(xml); // 得到普通 JS 对象 const xmlOut build(obj); // 再构建回 XML 字符串格式探测的逻辑非常聪明见 src/parse.browser.ts 的parse函数传入Uint8Array/ArrayBuffer或以bplist开头 → 走二进制解析字符串以{或(开头且不是 XML → 走 OpenStep 解析其余情况 → 当作 XML交给浏览器原生DOMParser 零依赖的秘密原生 DOMParser 替换 Node 库这是 plist.js 体积优化最核心的一步。解析 XML 需要 DOM 解析能力Node.js 端在 src/parse.ts 中import { DOMParser } from xmldom/xmldom把 Node 版 DOM 库打进产物浏览器端在 src/parse.browser.ts 中直接使用浏览器自带的new DOMParser().parseFromString(xml, text/xml)一行外部依赖都不需要同理其余Node 味的 API 也全部换成了浏览器原生能力场景Node 构建浏览器构建base64 编解码data标签Buffer原生atob/btoaXML 构建xmlbuilder库手写字符串拼接src/build.browser.tsDOM 解析xmldom/xmldom原生DOMParser结果浏览器包不含任何运行时依赖Node 端则依赖xmldom/xmldom和xmlbuilder两个包。 条件导出同一个 import自动选对构建这套一份代码、双端构建通过package.json的exports字段条件导出conditional exports实现exports: { .: { browser: { default: ./dist/index.browser.js }, import: { default: ./dist/index.js }, default: { default: ./dist/index.js } } }两个入口 API 完全一致仅切换内部实现src/index.tsNode 端→ 引入parse.ts/build.tssrc/index.browser.ts浏览器端→ 引入parse.browser.ts/build.browser.ts而parseBinary、buildBinary、parseOpenStep三端逻辑一致直接复用同一份源码。也就是说你在浏览器项目里写import { parse } from plist打包器命中browser条件零依赖的浏览器构建就被悄悄换上了——用户侧零配置。 4KB 是怎么来的体积对比环境DOM 解析来源额外依赖gzip 体积浏览器原生DOMParser无约 4KBNode.jsxmldom/xmldom2 个更大浏览器构建只包含 plist 解析/构建的核心逻辑XML 节点递归解析dict/array/key/string等标签的parsePlistXML函数、二进制 bplist 解析器src/parse-binary.ts、OpenStep 解析器src/parse-openstep.ts。对静态站点、WebAssembly 前端、PWA 这类对体积敏感的场景非常友好。 动手试试官方浏览器示例工程仓库内置了一个完整的浏览器 PlaygroundVite React 实现位于examples/browser/目录主界面examples/browser/src/App.tsx —— 左侧编辑/拖拽上传.plist右侧输出 JSON、XML、二进制 hex 三种视图示例数据examples/browser/public/samples/sample-basic.plist、sample-app-info.plist、sample-malformed.plist构建配置examples/browser/vite.config.ts克隆仓库后可直接跑起来体验git clone https://gitcode.com/gh_mirrors/pl/plist.js核心行为由 vitest 测试覆盖参考 test/parse.test.ts、test/parse-binary.test.ts 及test/fixtures/下的样例文件Info.bplist、nested.bplist等。 常见问题速答浏览器里需要单独引入 DOMParser 吗不需要它是浏览器 Web API 的一部分直接用即可。能解析二进制的 .bplist 文件吗可以。将文件读成二进制后传入即可自动识别const buf new Uint8Array(await (await fetch(Info.bplist)).arrayBuffer()); const obj parse(buf); // 自动走 parseBinaryOpenStep 格式defaults read的输出怎么解析字符串以{或(开头时自动识别也可以显式调用parseOpenStep()样例见test/fixtures/defaults-read.openstep。有安全方面的处理吗有。浏览器构建会拒绝__proto__键名防止原型污染对应 CVE-2022-22912见 src/parse.browser.ts 中对key节点的处理。✅ 总结关键点说明三种格式XML / 二进制 bplist / OpenStepparse()自动识别零依赖浏览器构建全部使用原生DOMParser、atob/btoa、字符串拼接自动切换靠package.json的exports条件导出打包器命中browser条件极致体积gzip 后约 4KB适合体积敏感的前端场景plist.js 用一个优雅的架构示范了双端包的最佳实践源码层拆出.browser.ts变体 条件导出发布最终用户只需一行import { parse } from plist就能在任何环境里以最小代价解析 Apple 属性列表。【免费下载链接】plist.jsApple property list parser/builder for Node.js and browsers — supports XML, binary (bplist), and OpenStep formats项目地址: https://gitcode.com/gh_mirrors/pl/plist.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考