前端工程化深入：多入口、验证矩阵与发布边界

可重现输入与产物

前置为首批锁文件与构建。工程的输入包括源码、锁文件、包管理器/Node版本、构建配置和必要环境值；只保存package.json不够。npm ci验证锁与清单一致并按锁安装，不自动消除跨OS原生依赖和环境差异。本项目固定Node24.21.0、npm11.19.0、Vite8.3.4及已有框架依赖，React/Vue lock不因增加源文件而无故更新。库代码、测试夹具和产物职责分开，dist可重新生成，不作为源码修改入口。

构建缓存必须根据真实输入失效；盲目恢复另一Node/OS的node_modules会带来原生模块不兼容。排错先保存原错误和版本，再干净安装，不能把删锁文件当通用办法。脚本失败返回非零，流水线必须停止；测试输出中的“预期编译失败”要由验证脚本检查退出码与目标诊断，不能简单忽略所有失败。

多入口完整配置

React与Vue都保留index.html阅读清单并增加advanced.html异步状态实验。input显式引用两个文件，fileURLToPath正确处理Windows盘符与路径空格，不用new URL().pathname直接充当本机路径。base='./'使构建HTML引用相对资产，适合本实验静态子路径；真实客户端路由深链还需要服务器回退策略，base本身不会自动配置服务器。

React完整构建配置

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react';
import {fileURLToPath} from 'node:url';
export default defineConfig({plugins:[react()],base:'./',build:{rollupOptions:{input:{main:fileURLToPath(new URL('./index.html',import.meta.url)),advanced:fileURLToPath(new URL('./advanced.html',import.meta.url))}}}});

Vue完整构建配置

import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
import {fileURLToPath} from 'node:url';
export default defineConfig({plugins:[vue()],base:'./',build:{rollupOptions:{input:{main:fileURLToPath(new URL('./index.html',import.meta.url)),advanced:fileURLToPath(new URL('./advanced.html',import.meta.url))}}}});

项目完整文件分别见React深入、Vue深入，基础文件和package-lock已经在各examples目录。按以下流程在每个包内运行，PowerShell/Bash相同：npm ci → npm run verify → npm run preview -- --port 5190（Vue用5191）；分别打开/及/advanced.html。verify依次执行模型测试和生产构建，两个入口都应出现在dist。

复现无框架与Node验证，从仓库根执行node --test examples/web/system-lab/model.test.mjs examples/node/stream-lab/summary.test.mjs；TypeScript进入examples/web-plus/typescript执行npm ci、npm test，再运行两份fixtures的指定失败编译。所有文件、源码、测试和预期均在站内对应正文，不依靠外链才能运行。

测试分层与故障矩阵

层次	证明什么	必须检查的反例
静态编译	类型契约、穷尽分支	TS2322指定负例、条件推断退化使TS2578出现
模型测试	任务所有权、不可变值、资源清理	旧成功/旧失败晚到、忽略取消、dispose后调用
CLI进程	参数、文件、编码、退出码与完整输出	缺文件、坏JSON/UTF-8、上限、部分输入后失败
框架生产页	实际组件、事件、订阅、卸载与恢复	slow后新查询、error恢复、取消、反复挂卸
静态资产	dist是否完整、base与路径是否正确	子路径下两个HTML、CSS/JS200、直接刷新

纯模型通过不能证明Vue模板绑定正确，生产build通过也不能证明真实业务行为；反之浏览器点一次正常路径不能代替边界测试。控制并发顺序用可控Promise或受控回调，不靠把sleep改大掩盖竞争。CI应运行与本机同样入口并保存失败日志，最终部署环境还要执行资产和健康检查，本批不伪称已经配置某云服务流水线。

产物、缓存与恢复

把两份dist分别复制到一个干净静态根的react/与vue/，通过HTTP访问/react/advanced.html和/vue/advanced.html，验证相对资产及刷新；不要把源码仓库根直接当公网发布目录。带hash资产可长缓存，HTML通常需要重新验证，但必须由真实响应头落实。发布时保留前一版本的HTML与匹配资产，原子切换目录或版本指针；只回滚HTML而已删旧hash文件会使页面无法加载。

source map能帮助诊断，也可能包含源码和路径，发布策略按实际访问权限确定；删除map不会修复业务错误。VITE_前缀的客户端值可以进入产物，不能放密钥。包审计报告需要结合实际依赖路径和利用条件处理，不能把npm audit fix --force作为不看破坏性的自动修复；本任务不升级本站或教学框架以外的依赖。

排错与练习

Rollup/Vite提示找不到入口先查配置相对位置；源码在dev能用但dist404先查入口产物、base和部署目录；EBADENGINE核对实际Node，ERESOLVE核对peer范围；不要一开始清全部全局缓存。1. 为何本例用fileURLToPath？2. 只缓存dist而忽略构建配置改变会发生什么？3. 为什么只发布最新JS会破坏旧HTML回滚？

参考解法

URL路径不等于本机路径，Windows盘符、编码和空格都需标准转换。配置变化也是输入，旧缓存可能缺advanced.html或引用错误base，须重建并检查两入口。旧HTML仍引用旧hash，旧资产被删会404；恢复单位应是相互匹配的整个版本，部署后还需验证真实请求与交互。

依据：Vite多页面、中文生产构建、npm ci。核对2026-10-17；正式发布、平台权限及跨浏览器按实际应用另验。