项目工程化重构复盘

单文件原型（Proof of Concept）迁移到工业级脚手架，本质上是完成了从**运行时编译（Runtime Compilation）到构建时预编译（Build-time Pre-compilation）**的范式转移。

🚀 项目工程化重构复盘

一、 架构演进：从 Monolithic HTML 到 Modular React

我们成功将一个“面条式”的单文件应用解耦，实现了关注点分离（Separation of Concerns）：

• 模块化拆分（Componentization）：将原有的 Editor、EntryList、TagView 从全局作用域抽离，利用 ES Modules 进行组件化封装。这不仅消除了全局变量污染，还为后续的单元测试和组件复用打下了基础。
• 构建流优化（Build Pipeline）：引入 Vite 作为构建工具，利用其基于原生 ESM 的 HMR（模块热替换） 极大地提升了开发体验（DX），并通过 Rollup 实现了生产环境的 Tree Shaking 和资源压缩。
• 静态资源管理（Asset Pipeline）：将 CDN 依赖转化为本地 NPM 依赖管理，确保了构建的**确定性（Determinism）**和离线开发的可用性。

二、 技术攻关：依赖冲突与版本对齐

在引入 Tailwind CSS 体系时遇到的环境阻碍，是典型的**工具链向上兼容性（Upward Compatibility）**异常：

• 核心冲突：Tailwind CSS v4（最新版）采用了全新的架构，其内置了部分 PostCSS 功能，与 Vite 默认的 PostCSS 处理逻辑或老版本的 Node.js 运行时环境产生了 API 级冲突，导致 crypto.hash 等内部调用失败。
• 策略决策：
• 诊断：识别到 v4 版本与当前开发环境（Node 18/20 混合上下文）及脚手架预设不匹配。
• 执行：采取了版本回退（Rollback Strategy）。通过执行 pnpm i tailwindcss@3，将 CSS 处理器锁定在生态最成熟、兼容性最广的 v3 稳定版。
• 结果：成功绕过了不稳定版本的实验性特性，利用 postcss 插件机制完成了样式的原子化扫描与注入，确保了 UI 系统的 1:1 还原。