30
0女生: 哈喽大家好欢迎收听，我们这一期播客啊然后咱们今天来聊一聊。前端脚手架的一个发展的过程一些工具的特点，以及在企业级项目里面我们如何去挑选。或者说如何去设计一个适合自己的脚手架的架构模式。
男生: 听起来很有意思啊那我们就直接开始吧好啊看看这个脚手架背后到底都有哪些。哲学和实践。
女生: 我们就先从，前端脚手架的一个基本的演进过程来开始聊起吧，啊就是为什么会出现脚手架，它背后解决的是什么问题？
男生: 其实就是因为前端的这个领域在过去的十年里面。爆炸式的增长啊然后从一个非常简单的。几个 HTML 文件。发展到了现在有构建工具编译器。代码检查测试框架。依赖管理等等非常复杂的一个生态。所以在这个过程当中脚手架就应运而生了它可以帮助我们去抽象一些复杂的工具的配置。可以帮助我们快速的启动一个项目。并且可以在团队当中去推行一些最佳实践。所以它是现代前端开发当中非常重要的一个。
女生: 我们就先从，比较经典的，第一波浪潮的基于 webpack 的这些脚手架工具来开始聊起吧，啊就是像 create react app 以及 vue cli 他们。
男生: 嗯这两个工具其实可以说是。开创了一个时代啊就是把 webpack 的能力。封装起来提供给广大的开发者，但是他们两个在设计哲学上面是有一些。非常鲜明的对比的，比如说 create react app 它是一个。零配置的黑盒的工具，它帮你把所有的东西都隐藏起来你不需要去。关心里面的具体的配置是什么。然后他也提供了一个 eject 的机制让你可以在需要的时候去。完全的暴露这些配置。但是这个操作是不可逆的。
女生: 听起来就是对于想要简单上手的人来说是非常友好的，但是对于有一些定制化需求的人来说可能就会有一些。
男生: 对就是这样所以它比较适合那种。初学者或者说你在做一些小型的项目。那像 Vue CLI 它其实从一开始就是非常强调可扩展性。它有一个非常强大的插件系统。然后你可以通过项目根目录下面的一个配置文件去进行一些细粒度的调整。它不会像 eject 这样一下子就把所有的东西都暴露出来让你一下子变得很复杂。但是很可惜的是这两个工具现在都已经基本上进入到了维护模式。就是官方都已经推荐使用一些新的工具来初始化项目了，嗯比如说 Vite.
女生: 那 Vite 和 UmiJS 他们作为新一代的前端工具，他们又有哪些独特的地方呢，或者说他们两个之间又有哪些区别呢？
男生: Vite 它其实是利用了现代浏览器对 ES 模块的支持。然后提出了一种新的开发模式。就是它不需要像 webpack 那样去预先打包你的应用。它是直接把你的源码作为 ESM 提供给浏览器。浏览器在解析的时候发现有 import 语句才会去发送请求。 Vite 的开发服务器会拦截这些请求。对他进行一些实时的转换再返回给浏览器。所以它的启动速度是非常非常快的。它的 HMR 也是非常快的并且它不会随着项目的体积增大而变慢。在生产环境下面它还是使用了 Rollup 来进行打包。所以它的构建输出也是非常高效的。
女生: 哇这个开发体验的提升听起来确实非常的诱人呐！
男生: 对没错，然后 UmiJS 它其实是一个企业级的元框架。它的设计哲学里面有一个非常重要的就是约定优于配置。它是围绕路由来进行一个高度集成的。它也有非常强大的插件系统。它也支持配置式路由和约定式路由。它在性能上面的一个创新点是它的 MFSU.就是它会把你的依赖模块进行一个预编译。缓存起来，所以它的启动速度也非常的快。在某些场景下面甚至可以比 Vite 还要快。它也内置了很多企业开发所需要的一些功能比如说权限管理。微前端等等。所以它比较适合那种大型的复杂的企业级项目。
女生: 那你觉得在企业级的脚手架里面，有哪些架构模式是比较常用的或者说比较值得关注的？
男生: 其实主要有三种吧第一个是插件化，嗯第二个是 Monorepo，嗯然后第三个是黄金路径。啊插件化其实就是说。让你的脚手架可以通过插件的方式来扩展它的功能。这个其实在很多工具上面都有非常好的实践比如说 Vite 它的插件系统就非常的强大。还有一些比如像 Backstage.io 它是一个开发者门户。它也是通过插件化来管理它的功能的。还有一个更高级的例子是阿里巴巴的 SREWorks.它是可以做到运行时动态加载远程的组件。所以它的扩展性是非常强的。
女生: 哇这个动态加载远程组件听起来确实非常的牛逼啊！
男生: 对没错然后 Monorepo 它其实解决的是另外一个问题就是大型项目的代码组织的问题。就是你把所有的相关的项目都放在一个仓库里面。通过一些工具比如说 Lerna 或者说 Yarn Workspaces 来管理它的依赖。包括它的构建和发布等等。这个在很多大型的前端项目里面都有使用比如说 SREWorks 他们也是从一个单体的代码库。迁移到了 Monorepo 的模式。它带来的好处就是你可以很清晰的管理你的依赖。各个模块之间的代码共享也会非常的方便。最后一个黄金路径其实就是说。通过脚手架来帮你创建项目可以确保你所有的项目都是符合团队的标准和规范的。
男生: 这个其实在企业级开发里面是非常重要的可以帮你减少很多。治理的成本。
女生: 行吧今天咱们聊了这么多关于前端脚手架的一些发展的历程然后一些设计哲学一些工具的对比。以及在企业级项目里面如何去设计一个好的架构模式啊希望对大家有一些帮助。
男生: OK 了以上就是这期播客的全部内容啦感谢大家的收听咱们下期再见拜拜！
