为什么前端技术栈如此复杂？

2024-01-30 11:01

前端生态系统的复杂性是出了名的。在每一层，似乎都存在着不兼容的，相互竞争的标准。

没有通用的导入系统。ES 模块、CommonJS、异步模块定义（AMD）和通用模块定义（UMD）都是你可以导入或分享代码的不同方式。打包器试图通过支持多种方法来解决这个问题。但是代码经历了多层的压缩、混淆和转译。TypeScript 被编译成 JavaScript。网络上的代码会被压缩（以减少网络带宽）或混淆（以防止复制）。源映射可以解决其中一些问题，但这又是另一项需要配置的事情。获取正确的堆栈跟踪可能会很棘手。这需要语言、工具和运行时之间的协调。

极其不同的环境。一个特性和一个错误。前端代码预期在任何地方运行 - 不仅仅是浏览器。在不同环境中可用的上下文和 API 各不相同，很难知道你有哪些可用的上下文（更不用说知道你正在导入的库假设了什么）。这段代码能在服务器上运行吗？这段代码能在客户端上运行吗？这对开发者来说很困难（我可以使用什么代码）对于库维护者来说也很困难（我应该为哪些环境优化我的代码？）。

过度强调文件结构。太多的前端工具依赖于项目结构来进行行为设定。配置必须在项目的根目录中（导致了一长串的 tailwind.config.js、postcss.config.js、eslint.config.js、next.config.js 等）。文件结构对于导入代码是必要的恶，但在前端中，它却做了更多的事情。它可能是一个 API，用于将特定文件路由为网页，或者作为 API，或者作为静态网页，或者作为动态重新生成的网页。这些都很方便，但有时候很难调试，也很难发现代码库的部分内容。

配置地狱。开箱即用的工具有很多。长期以来，我们有 create-react-app，这是一个被赞誉的工具包，它集成了许多这样的工具，从一开始就为开发者提供了一个可用的配置。但是，如果你偏离了这条黄金路径，你就会被 20 多个开发工具和复杂的交互所困扰。几乎每个工具都在与其他工具争斗。ESLint（代码检查工具）和 Prettier（代码格式化工具）经常发生冲突。

开发失衡。在代码和部署之间有如此多的步骤，意味着热重载开发往往复杂。这导致了像 webpack-dev-server 这样的工具的出现，它为你处理了大部分问题。但是要警惕魔法。这些开发服务器中有太多的假设，它们可能会迅速偏离生产行为。