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

前端生态系统众所周知地令人困惑。在每一层次上，似乎都存在不兼容且竞争激烈的标准。

没有通用的导入系统。 ESModules、CommonJS、Asynchronous Module Definition（AMD）和Universal Module Definition（UMD）是你可以导入或共享代码的不同方式。打包工具试图通过支持多种方法来解决其中一些问题。但是

多层压缩、混淆和转译。 代码在运行之前要经历多次转换。TypeScript编译成JavaScript。Web上的代码会进行缩小（以减少网络带宽）或混淆（以防止复制）。源映射修复了其中的一些问题，但这又是另一件需要配置的事情。获取正确的堆栈跟踪可能会很棘手。它需要各种语言、工具和运行时之间的协调。

完全不同的环境。 一种特性也是一个缺陷。前端代码应该在任何地方运行 - 不仅仅是浏览器。不同环境中可用的上下文和API会有所不同，很难知道你有哪些可用的上下文（甚至更难知道你导入的哪些库假定了什么）。这对于开发人员来说很困难（我可以使用哪些代码），对于库维护者来说也很困难（我应该为哪些环境优化我的代码）。

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

配置地狱。 有太多可以直接使用的工具。很长一段时间里，有create-react-app，它是许多这些工具的一个受祝福的捆绑包，可以让开发人员从一开始就拥有可用的配置。但如果你偏离了黄金路径，你会得到20多个复杂交互的开发工具。几乎每个工具都在互相抗衡。ESLint（代码检查工具）和Prettier（格式化工具）经常发生冲突。

开发一致性。 在代码和部署之间有这么多步骤意味着热重载开发通常会变得很复杂。这导致了诸如webpack-dev-server之类的工具的出现，它可以为你处理大部分事情。但要小心魔法。这些开发服务器中有很多假设，它们可能会很快偏离生产行为。