• 前端

导读

本文以 browser-logos 仓库中 Internet Explorer 9-11 归档包的 CHANGELOG.md 为核心，系统梳理这份归档 Logo 资产包从 1.0.0 到 1.1.17 的完整演进历史，并深入讲解其背后的资产生成脚本（generate-images.sh）与变更日志自动化生成机制（release.js）。读完本文，你将掌握该 Logo 包的目录结构、SVG/PNG 多尺寸资产生成流程、CHANGELOG 的语义化标签体系，以及通过 npm/Yarn/cdnjs 获取该资产的三种方式。

说明：本文引用的文件路径均以仓库根目录为基准，与 根 README 的目录约定保持一致；该包位于归档区 src/archive/，对应已停止维护或已不活跃的浏览器 Logo 集合。

一、CHANGELOG 与归档包：一份 Logo 资产的 6 年演进史

internet-explorer_9-11是 browser-logos 项目为Internet Explorer 9、10、11 三个版本共用的官方 Logo（扁平化的蓝色 "e" 字标）所建立的独立资产包。其变更日志记录了从 2016 年 12 月 18 日（1.0.0）到 2023 年 4 月 24 日（1.1.17）共19 个版本的全部改动，横跨 6 年半：

该时间线全部取自 src/archive/internet-explorer_9-11/CHANGELOG.md，其中每条记录均附有对应的 Git commit SHA（如 1.1.17 对应0d5a96ea5f），可在仓库历史中追溯验证。

二、资产构成：一份 Logo 的完整形态

该归档包目录（src/archive/internet-explorer_9-11/）下共包含 11 个文件：

• 矢量源文件：internet-explorer_9-11.svg——这是后续所有位图版本的"母版"；
• 主位图：internet-explorer_9-11.png（2048×2048，透明背景）；
• 8 种规格位图：_16x16、_24x24、_32x32、_48x48、_64x64、_128x128、_256x256、_512x512，命名遵循{browser}_{size}x{size}.png约定；
• 元数据与文档：package.json（npm 包声明）、README.md（获取方式说明）、CHANGELOG.md（版本历史）。

从 SVG 源码看（viewBox="0 -2 313 305"），该 Logo 使用多达十余个径向渐变（radialGradient）叠加遮罩（mask）绘制而成，主体颜色为 IE 经典的#0f8ce1系蓝色渐变，辅以橙黄高光——这正是 1.1.16 中"recreate（重建）"SVG 后呈现的最终形态。

2.1 多尺寸位图如何生成：generate-images.sh

仓库通过 scripts/generate-images.sh 统一为每个 Logo 生成多尺寸位图。脚本内置了固定的尺寸清单（见 L30-L39）：

declare -r -a IMAGE_SIZES=( "16x16" "24x24" "32x32" "48x48" "64x64" "128x128" "256x256" "512x512" )

核心函数generate_different_sized_images（L82-L115）以目录内同名的{name}.png为主图，借助 ImageMagick 的convert命令配合一组"高质量缩放下采样"选项（Sinc/Jinc滤波、3 个 lobes、sigmoidal 对比度调整、透明背景、中心对齐）逐规格输出：

convert "$path/$basename.png" \ $CONVERT_BASE_OPTIONS \ -resize "$imageSize" \ "$path/${basename}_$imageSize.png"

用法示例（脚本头部注释）：

generate-images.sh src/edge src/archive/arora

该脚本还会在传入目录命中内置分组时，自动重建 src/main-desktop-browser-logos.png、src/main-mobile-browser-logos.png、src/browser-logos.gif 与 src/old-browser-logos.gif 等聚合图。这就是为什么 CHANGELOG 中多次出现"🔧 基于 SVG 重新生成 PNG"（1.1.16）与"🗜 图片优化"（1.1.3、1.1.4、1.1.6）的条目——SVG 母版的每次改动都需要联动重出全部位图。

三、版本演进的四大主线

从 CHANGELOG 的条目标签可以清晰提炼出该资产包 6 年维护工作的四个方向：

3.1 SVG 的引入与反复无损优化（🗜）

这是最密集的一条主线。1.1.0 首次引入internet-explorer_9-11.svg后，后续12 个版本都在做 SVG 优化：从 1.1.1 的"进一步优化"，到 1.1.4 单版本内 6 次无损优化提交，再到 1.1.16 由社区成员 Eoghan Murray "recreate" 重建 SVG，最后以 1.1.17 的无损优化收尾。可见"无损压缩（losslessly optimize）"是这类静态资产包最常见的维护工作，目标是在不改变视觉的前提下不断压缩文件体积。

3.2 位图与 SVG 的联动再生成（🔧）

1.1.16 中 commitfef1574b25明确记录"Regenerate the IE 9-11 PNGs based on the SVG"——SVG 结构重建后，8 个尺寸的 PNG 全部基于新 SVG 重新生成，保证位图与矢量源始终一致。这正是上述generate-images.sh流水线的实际应用场景。

3.3 文档与包元数据的持续打磨（📚 / 🔧）

• 1.1.2、1.1.5、1.1.14 多次改进 README；
• 1.1.5 移除 Yarn 安装说明、1.1.8 又重新加入（对应 README.md 中同时保留 npm 与 Yarn 两种方式）；
• 1.1.7 在 package.json 中通过repository.directory字段（src/archive/internet-explorer_9-11）显式声明包在仓库中的目录位置。

3.4 cdnjs 推荐策略的两次翻转

一个值得注意的细节：1.1.9（2019-11-30）移除了 cdnjs 推荐，而 1.1.14（2020-07-11）又将其加回。这种"加入→移除→再加回"的迭代在 CHANGELOG 中有明确 commit 与 issue（#181）关联，说明包维护策略并非单向，阅读变更日志时应结合时间上下文理解。

四、CHANGELOG 是如何生成的：release.js 的自动化机制

这份 CHANGELOG 并非手工维护，而是由 scripts/release.js 在发布流程中自动生成与更新的。理解其机制有助于反过来读懂 CHANGELOG 的每个条目。

4.1 Emoji 标签语义

getChangelogData 定义了提交标题首字符的标签与章节的映射：

对照 IE 9-11 的 CHANGELOG 即可验证：1.0.0 是✨（首个版本），1.1.0 的✨ Add internet-explorer_9-11.svg与🔧 Tweak and further optimize分属 "New features" 与 "Bug fixes / Improvements" 两节，其余版本几乎全部是🗜/🔧/📚的改进类提交。

4.2 语义化版本号自动递增

同一函数还根据提交类型自动决定 semver 递增策略（L225-L238）：

let semverIncrement = 'patch'; if (breakingChanges) { semverIncrement = 'major'; } else if (newFeatures) { semverIncrement = 'minor'; }

这解释了为什么 1.0.0 之后连续 16 个版本都是 patch 级递增（1.1.x）——中间没有任何破坏性变更或新特性提交。

4.3 新版本条目的写入格式

updateChangelog 在现有文件头部插入新条目，格式为版本号 (发布日期)+ 等宽下划线分隔线 + 对应章节内容，随后getReleaseNotes（L256-L291）按固定结构（文件头固定 8 行 +版本号正则/^(\d\.?){3}/）解析出最新一版作为 GitHub Release 正文。我们看到的1.1.17 (April 24, 2023)\n---------------------------正是这套模板的输出。

五、如何获取并使用该 Logo 资产包

按 src/archive/internet-explorer_9-11/README.md 的说明，获取该 Logo 有三种方式：

方式一：npm 安装（作为开发依赖）

npm install --save-dev @browser-logos/internet-explorer_9-11

方式二：Yarn 安装

yarn add --dev @browser-logos/internet-explorer_9-11

方式三：使用 cdnjs 静态资源服务（对应 src/archive/internet-explorer_9-11/README.md 中的 cdnjs 链接，推荐用于无需打包的场景）。

安装后，包内的 package.json 会提供完整的元数据供工具链使用，其中关键字段包括：

{ "name": "@browser-logos/internet-explorer_9-11", "version": "1.1.17", "description": "Internet Explorer v9-11 browser logo", "keywords": ["browser-logos", "logo", "internet-explorer", "internet-explorer-logo"], "repository": { "directory": "src/archive/internet-explorer_9-11", "type": "git", "url": "https://github.com/alrra/browser-logos.git" } }

注意：version与 CHANGELOG 最新版本（1.1.17）严格一致，这正是 release.js 发布流水线（npmUpdateVersion→updateChangelog→ 提交 →npm publish）同步更新的结果。取用场景包括但不限于：演示文稿、博客配图、站点 favicon 体系、以及需要在页面中展示旧版浏览器 Logo 的历史回顾类内容（如浏览器兼容性页面）。

六、在归档体系中的定位

从 src/archive/README.md 可以看到，Internet Explorer 系列在归档区中共有 4 个资产包：internet-explorer_6、internet-explorer_7-8、internet-explorer_9-11与internet-explorer-tile_10-11（后者的 10/11 版本磁贴另有单独资产）。其中internet-explorer_9-11与internet-explorer-tile_10-11均对应 9、10、11 三个版本号段，二者同属微软在该时期的官方视觉体系。

归档区（archive）的定位在 根 README 中有明确说明：存放"较旧或已不再活跃的浏览器"的 Logo。IE 9-11 资产包置于此处，意味着其视觉标识已进入"历史资产"状态——浏览器本身已停止支持，但 Logo 作为技术史料与设计素材仍持续以 npm 包形式可获取，这正是 browser-logos 项目"高清、透明背景、多尺寸"资产体系的典型用例（所有 Logo 均为透明背景高清图，见 根 README 说明）。

七、结语

一份仅 19 个版本的 CHANGELOG，完整记录了一个浏览器 Logo 资产包从"首个发布"到"SVG 引入"再到"反复无损优化"的全生命周期。透过它，我们既看到了静态资产维护的典型节奏（SVG 母版驱动 + 多尺寸位图联动再生成 + 文档/元数据打磨），也看到了 browser-logos 项目工程化的一角——CHANGELOG 由 release.js 依据 emoji 标签自动生成、语义化版本自动递增，配合 generate-images.sh 的 ImageMagick 批量缩放流水线，构成了一个可复用的"浏览器 Logo 资产发布体系"。对于需要在历史浏览器主题内容中展示 IE 9-11 标识的开发者，@browser-logos/internet-explorer_9-11是目前可直接引用的标准答案。

• 前端