不用Vite、Webpack，React如何重返HTML时代反工程化？

前言 最近一直忙于装修和开发新产品，文章都没时间更新，快速迭代的后果就是架构没有跟上功能增长的步伐，现在隐隐有脱离掌控的感觉，我这几天也把进度放慢下来，思考一下整体的规划。 也顺便整理一下笔记，没有输出心里很不踏实🤣 好了，说回正题，为什么标题叫“前端邪修”呢？在前端高度工程化的今天，各种工具层出不穷，大家都在说别更新了，学不动了，我直接反其道而行： 不用 Vite 不用 Webpack 不跑 dev server 不搞 HMR 不维护 node_modules 直接在 HTML 文件里引入 React 写界面！ 这听起来很像 2025 年还在用 Dreamweaver 写网页哈哈哈🤣 本文记录一次可以称之为「前端邪修」的反工程化开发实践。 第一阶段 Runtime JSX 一开始，我用的是最原始、也最“离经叛道”的 React 用法。 <script src="react.development.js"></script> <script src="react-dom.development.js"></script> <script src="babel.min.js"></script> <script type="text/babel"> function App() { return <h1>Hello World</h1>; } </script> 特点很明显： 不需要 Node 不需要 npm / pnpm 打开浏览器就能写 React JSX 由 babel-standalone 在浏览器里实时编译 你别说，其实这种方法写起来还挺爽的（逃 心智负担极低 没有工具链焦虑 HTML 即入口，所见即所得 但缺点也很明显： 各种依赖体积巨大，动辄几MB JSX runtime 编译极慢 页面一复杂，加载时间肉眼可见地上升 我这个简单的app，本地加载都要半分钟的时间🤣 其实这种用法，是 React 官方早期 Demo + 教学级用法，后来被官方明确标注为：Not recommended for production 我之前也写过一篇文章介绍：在HTML中引入React和JSX 实践也证明了，这种方式只能当本地demo测试一下，根本不能作为production发布。 第二阶段 gulp + babel，我只要 JSX 编译 我选择了一个在今天看来非常“复古”的工具：gulp。 这个工具虽然简单，但非常好用，我一直非常喜欢这个工具，可以在我的很多项目里看到 gulp 的身影： AspNetCore开发笔记：使用NPM和gulp管理前端静态文件 Django项目引入NPM和gulp管理前端资源 返璞归真！使用 Alpine.js 开发交互式 web 应用，抛弃 node_modules 和 webpack 吧！ 用法是这样的： 把 jsx 组件按照顺序，显示添加到待处理的列表里 const jsxComponents = [ "Alert.jsx", "Toast.jsx", "Login.jsx", "Register.jsx", "ChatView.jsx", "DetailView.jsx", "App.jsx" ]; 我放弃了自动依赖分析，这在现代前端里几乎是“原罪”。😂 但在一个边界清晰、规模可控的项目里，它反而是最可控的方式。 gulp 在这里做了简单的几个事情： JSX → JS 多文件 → 一个 bundle 压缩 gulp.task("concat:jsx", () => { return gulp.src(jsxComponents, { base: "." }) .pipe(babel({ presets: ["@babel/preset-env", "@babel/preset-react"] })) .pipe(concat("dist/js/app.bundle.js")) .pipe(terser()) // Use terser for minification .pipe(gulp.dest(paths.root)); }); 没有 loader，没有 plugin 地狱，没有配置互相打架。 最终产物只有一个：dist/js/app.bundle.js 最终形态 构建完成后，整个应用的入口是一个极其朴素的 HTML 文件。