@ice/bundles 深度解析：ice.js 预打包构建依赖的设计与版本演进
发布时间：2026/9/20 19:33:37 作者：尧图编辑部 阅读量：1,286
ice/bundles 深度解析ice.js 预打包构建依赖的设计与版本演进【免费下载链接】ice ice.js: The Progressive App Framework Based On React基于 React 的渐进式应用框架项目地址: https://gitcode.com/gh_mirrors/ice1/iceice/bundles是 ice.js基于 React 的渐进式应用框架内部的构建依赖预打包层它把 webpack、rspack、swc、postcss、less、sass、core-js 等数十个编译期依赖统一收集、编译并二次导出供 packages/ice 主包与各类插件按固定入口消费。本文以 packages/bundles/CHANGELOG.md 为骨架结合 packages/bundles 的源码结构系统讲解它的设计动机、目录布局、构建流程并逐版本梳理 0.1.1 → 0.2.9 的演进主线webpack 时代的奠基、swc 插件体系、polyfill 策略、以及向 rspack提速模式迁移的完整路径帮助读者理解 ice.js 构建体系为什么需要一层预打包依赖以及它究竟打包了什么、如何打包。一、为什么 ice.js 需要 ice/bundles打开 packages/bundles/README.md全文只有两句话Prepacked bundles for ice.js.DO NOT USE THIS PACKAGE DIRECTLY.这个请勿直接使用的包恰恰是整个 ice.js 构建链路的基石。从源码结构看它承担了三个核心职责依赖收敛与版本锁定构建相关依赖webpack、rspack、swc/core、postcss、less、sass、esbuild、core-js、caniuse-lite 等全部固定版本后打入包内保证 ice.js 在不同项目中的编译行为一致二次导出re-export通过统一的 ESM 入口暴露常用工具让上层代码只依赖ice/bundles一个包名内部模块白名单导出把 webpack、rspack 的深层内部模块如Compilation、ModuleNotFoundError、LimitChunkCountPlugin等以受控方式导出供框架级插件使用——这是普通业务项目无法直接做到的。消费方证据ice/bundles不是孤立存在的它在 ice.js 主包中被大量引用packages/ice/src/bundler/rspack/index.ts 通过await import(ice/bundles/esm/rspack.js)动态引入 rspack 核心packages/ice/src/bundler/rspack/start.ts 通过ice/bundles/esm/dev-server.js引入开发服务器packages/ice/src/bundler/webpack/getWebpackConfig.ts 从ice/bundles/compiled/webpack/index.js引入 webpack 与 lodashpackages/ice/src/bundler/webpack/start.ts 从ice/bundles/compiled/webpack-dev-server/lib/Server.js引入 DevServer。可见ice.js 的 webpack 与 rspack 两条打包通道都构建在 ice/bundles 之上这正是 CHANGELOG 中大量条目围绕 webpack/rspack 版本升级展开的原因。二、目录布局与打包产物从 packages/bundles 的目录结构可以清晰看出源码src— 构建脚本scripts— 产物compiled/esm的三层设计路径职责src/index.ts主入口二次导出编译工具与 swc 插件src/rspack.tsrspack 核心的再导出export * from ../compiled/rspack/core/dist/index.jssrc/dev-server.tsrspack dev-server 的再导出src/plugin-refresh.tsreact-refresh 插件再导出webpack/bundle.jswebpack 内部模块白名单导出清单webpack/packages40 个被单独提取的 webpack 内部模块副本scripts/tasks.ts编译任务定义决定哪些包、以何种方式被打入 compiledoverride对上游包的文件级覆盖如 rspack binding 版本检查、RefreshUtilspackage.json版本与依赖清单当前版本 0.2.9主入口导出清单src/index.ts 是理解这个包暴露什么的第一站import { createRequire } from module; import { dirname } from path; import postcss from postcss; import less from less; import sass from sass; import swc from swc/core; import esbuild from esbuild; import * as caniuseLite from caniuse-lite; import { getCssModulesLocalIdent } from ice/css-modules-hash; const require createRequire(import.meta.url); const swcPluginRemoveExport require.resolve(ice/swc-plugin-remove-export); const swcPluginKeepExport require.resolve(ice/swc-plugin-keep-export); const swcPluginNodeTransform require.resolve(ice/swc-plugin-node-transform); const coreJsPath dirname(require.resolve(core-js/package.json)); export { postcss, less, sass, swc, swcPluginRemoveExport, swcPluginKeepExport, swcPluginNodeTransform, coreJsPath, esbuild, caniuseLite, getCssModulesLocalIdent, }; export type { ProcessOptions } from postcss; export type { Options as SwcConfig, Config as SwcCompilationConfig, ReactConfig } from swc/core;几个值得注意的设计点swc 插件以「解析后的绝对路径」导出require.resolve(ice/swc-plugin-remove-export)返回的是插件在 node_modules 中的物理路径上层如 packages/ice 的 swc 配置可以直接把这个路径塞进 swc 的jsc.experimental.plugins避免重复解析core-js 以目录路径导出coreJsPath指向core-js/package.json所在目录便于上层按需引用 polyfill 模块类型随包导出SwcConfig、ReactConfig等类型从swc/core直接转发上层无需再单独安装swc/core类型依赖。构建入口scripts/tasks.tsscripts/tasks.ts 定义了如何把上游依赖变成 compiled 产物其策略非常典型externals 白名单taskExternals把caniuse-lite、chokidar、sass、less、eslint、typescript、postcss、swc/core、jest-worker、esbuild等列为 externals——不打包进 compiled让用户环境提供。注释明确写道 dont bundle caniuse-lite data so users can update it manually即 browserslist 数据要保持可更新性依赖重写replaceDeps()把打包产物中的require(xxx)/from xxx批量重写为ice/bundles/compiled/xxx实现依赖内部互相引用时仍走预打包产物覆盖补丁例如把fork-ts-checker-webpack-plugin中的typescript通过fs.writeFileSync强制 external 化module.exports require(typescript)避免 ncc 误打包体积巨大的 typescript整体拷贝 依赖重写webpack-dev-server、pmmmwh/react-refresh-webpack-plugin、rspack/core、rspack/dev-server、rspack/plugin-react-refresh均采用globbySync拷贝 replaceDeps重写的模式文件级覆盖rspack/core的dist/util/bindingVersionCheck.js被 override/rspack/bindingVersionCheck.js 覆盖——原实现会检查rspack/binding的版本而覆盖版直接返回null并注释 framework will lock the binding version框架负责锁定 binding 版本并把所有rspack/binding引用替换为ice/pack-binding。三、webpack 内部模块的白名单导出webpack/bundle.js 是理解 CHANGELOG 中export webpack internal modules系列条目的钥匙。它把 webpack 的深层模块显式导出例如module.exports { BasicEvaluatedExpression: require(webpack/lib/javascript/BasicEvaluatedExpression), ModuleFilenameHelpers: require(webpack/lib/ModuleFilenameHelpers), LimitChunkCountPlugin: require(webpack/lib/optimize/LimitChunkCountPlugin), SingleEntryPlugin: require(webpack/lib/SingleEntryPlugin), ExternalsPlugin: require(webpack/lib/ExternalsPlugin), NormalModule: require(webpack/lib/NormalModule), ModuleNotFoundError: require(webpack/lib/ModuleNotFoundError), Compilation: require(webpack/lib/Compilation), WebpackError: require(webpack/lib/WebpackError), HotUpdateChunk: require(webpack/lib/HotUpdateChunk), sources: require(webpack).sources, webpack: require(webpack), package: { version: require(webpack/package.json).version }, // ... };这直接对应 CHANGELOG 两条记录0.2.9feat: export ModuleNotFoundError of webpack——为框架在编译报错场景中做错误类型判断提供了入口0.2.8ice/bundles: export more webpack internal modules——进一步扩大白名单当前 webpack/bundle.js 已导出 40 个模块其配套条目是ice/app: remove unused deps and import them from ice/bundles即主包把这些依赖收敛到 bundles 统一提供。同时webpack/packages 目录下存放了这些模块的副本构建脚本scripts/tasks.ts在打包 webpack 时会把webpack/hot与webpack/packages一并拷贝进compiled/webpack确保产物自洽。四、CHANGELOG 全景0.1.1 → 0.2.9 的演进主线版本里程碑总览版本类型核心内容0.1.1首个完整基线swc 插件三件套 core-js 3.26.0 入库0.1.2Patch新增 esbuild 与 esbuild-register0.1.3Patch升级 ice/swc-plugin-keep-export0.1.3 → 0.1.40.1.4Patch移除 ice/swc-plugin-keep-platform 依赖0.1.5Patch新增 node transform 的 swc 插件0.1.6Patch启用 HMR 以避免整页刷新0.1.7Patch批量升级 swc/core、cacache、webpack、core-js0.1.8Patch回退 swc/core 版本swc issue #71740.1.9Patch升级 ice/swc-plugin-node-transform0.1.10Patch升级 webpack 与 ice/swc-plugin-keep-export0.1.11PatchAbortController 自动 polyfill0.1.12Patchwebpack 5.86.0 / webpack-dev-server 4.15.00.1.13Patch修复页面路由导出 pageConfig/dataLoader 时 HMR 失败0.1.14Patch统一升级 swc/webpack/swc 插件/core-js0.1.15Patch升级 swc/corerspack 支持更多 hook 与插件0.1.16Patch修复生产产物 sourceMap url 与 sourceMap 文件不配套0.1.17Patch提速模式下支持自定义 transform 插件0.2.0Minor支持 ice/pack-binding0.2.1Patch更新 binding 版本修复禁用 code splitting 时的解析错误0.2.2Patchunplugin 升至 1.6.0更新 optimize imports 的 binding0.2.3Patch提速模式 HMR boundary 修复CSS Modules hash 不一致修复适配 rspack 0.5.10.2.4Patch升级 rspack 版本0.2.5Patch对齐 webpack 模式的 transform 顺序与内容0.2.6Patch升级 icepack重构 contenteditable="false">【免费下载链接】ice ice.js: The Progressive App Framework Based On React基于 React 的渐进式应用框架项目地址: https://gitcode.com/gh_mirrors/ice1/ice创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
尧图网站开发 