参考资料： https://docs.google.com/document/d/1w8dp0PIkuBvhjNOHh0kw9vFEn2--42tQb9vhd6Z0Kos/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1X8s8S3KACu7vqc-JzZBICHYALja76w-xHEp8y9xzfEA/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1lzD_Z310D4VzILoUdhm6t7FnsJasfapvwe_1xM0l8Lk/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1otdK3ruauQTz_UonibjgfxrUEFdgFo13AWo5EcSq_3I/edit?usp=sharing

参考资料： https://docs.google.com/document/d/16wbD_BLeL0q0WsDSZk8rXKppprTUXfTcaHfM02j0k6Q/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1YIswcXQduzXXXUuIwadZUF46pdVYRShE_vly9i5fGQo/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1a_sGx3Vsemw6q-MRmaIAFyrBXU58_8GgRQKiSZkrS00/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1A0bQl7i_Gd2_qn92WyNdFJddmoCMm0Llhn2mChgwEKo/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1Onekkq-gH1sug2nrJ0vCUncflIf37F7fD-plblgf_qY/edit?usp=sharing

参考资料： https://docs.google.com/document/d/15pLxvjhnR815sAx3qClWVoBAMdKAvLS5FvwxHcIXTsw/edit?usp=sharing

参考资料： https://docs.google.com/document/d/1Juajht0QPCgkFvey9oo9Ituq4dZBr5XYZS8AB7DAqBw/edit?usp=sharing

参考资料: https://docs.google.com/document/d/1m1QptRACSYPUsVcbNvQHH_uRozt9zYBNdUTNL62aKUE/edit?usp=sharing

女生: 哈喽大家好欢迎收听，我们这一期的播客啊，然后咱们今天来聊一聊这个 ESLint。从怎么用，到一些实际的项目当中的集成，再到它的一些核心的原理啊，都给大家聊一聊。 男生: 好啊那我们就直接开始吧啊先给大家介绍一下什么是 ESLint 以及它的一些核心的概念。 女生: 今天咱们要聊这么几个大的板块啊第一个是 ESLint 它的一些基础的概念。第二个是 ESLint 的配置，怎么配，然后有哪些注意事项。第三个是 ESLint 在实际的项目当中，有哪些应用的场景，最后我们会再聊一聊 ESLint 它的一些。引擎的原理是怎么实现的。 男生: 嗯，听起来内容还挺多的对那我们就一点一点来啊先从第一个板块开始。 女生: 首先第一，第一个问题啊就是说 ESLint 它作为一个代码检查工具。它到底给我们带来了哪些好处，对吧为什么我们要使用它？ 男生: 呃简单来说就是 ESLint 它是一个静态代码分析工具。它可以在不执行你代码的情况下，帮你去分析你的代码当中的一些潜在的问题或者说风格上的问题。对，然后它的好处我觉得有这么几点吧第一个是它可以帮你。强制执行一个团队的编码规范，就是大家都按照一个统一的风格来写代码这样的话会减少很多。因为风格不统一带来的一些麻烦。 女生: 听起来是一个非常好的团队协作的工具啊！ 男生: 没错没错而且它还可以帮你在早期就发现一些错误比如说你有一些变量定义了但是没有使用啊。或者说有一些代码是根本就执行不到的呀。等等吧就是有很多这种问题他可以帮你发现，然后它最大的好处我觉得是可以帮你节省时间。就是你不用在 code review 的时候再去纠结一些风格上的问题。大家可以专注于一些更重要的事情。 女生: ESLint 它的核心设计理念是什么呢它是怎么做到这些事情的呢？ 男生: 呃它的核心的设计理念我觉得就是它的完全可插拔性。就是它里面的每一条规则其实都是一个独立的插件。你可以在运行时去动态的添加。所以这就导致它有一个非常非常活跃的生态系统你可以找到很多。别人已经写好的插件或者说共享配置或者说解析器。然后你可以非常快速的去搭建一个你自己的 linting 的环境。 女生: 听起来扩展性确实非常强大呀！ 男生: 是的是的对，然后它主要的几个核心的组件就是。解析器，插件和规则，嗯解析器的话它是可以把你的源代码转换成一个抽象语法树。 ESLint 默认是使用 Espree 这个解析器，但是你也可以自己去指定比如说你要 lint typescript 的话你可能就要用。tslint 这样的解析器，插件的话就是可以帮你扩展一些规则或者说一些配置。规则的话就是真正去检查你的代码的一些。逻辑，它的另外一个比较大的特点就是它的架构是非常模块化的。就是它的核心的检查引擎是和它的命令行工具是完全分开的。所以这也是为什么它可以非常容易的集成到各种开发工具当中。 女生: 那 ESLint 的配置系统它是怎么一步一步演进来的呢？ 男生: 呃它早期的配置系统是一个级联的配置系统就是它会从你的被检查的文件的目录开始。一层一层的往上找配置文件然后把它们合并。这种方式的好处是非常灵活但是坏处就是你很难去调试。就是你不太清楚到底是哪个配置在起作用。 女生: 哦确实会带来一些困扰啊！ 男生: 所以在 ESLint v9 之后他们就引入了一个新的扁平化的配置。就是你所有的配置都只存在于一个 eslint.config.js 的文件当中。然后你通过一个数组来导出你所有的配置对象。你也可以非常明确的去指定每个配置的作用范围。它也支持使用标准的 ES module 所以你可以在里面写一些动态的配置。呃我觉得这个也是更加符合现在的 JavaScript 生态的一个趋势。就是大家都希望配置是更直观的更明确的。 女生: 在 ESLint 的生态系统里面我们会有哪些比较常见的实践呢？ 男生: 呃首先就是共享配置，嗯就是它是一个非常好的方式来共享一组规则。然后在社区里面也有很多非常流行的共享配置比如说 airbnb 的。standard 的还有 google 的，他们这些配置其实不仅仅是规则的不同他们其实是代表了不同的开发哲学。比如说 airbnb 它是一个非常全面的并且非常严格的一个配置。 standard 它是一个非常推崇约定优于配置的一个。极简的配置， google 的话它是一个比较折中的，就是它会希望。呃代码是比较简洁的又比较容易阅读的。 女生: 哦所以选择不同的配置还涉及到团队的一些风格的倾向啊！ 男生: 对是的是的，然后另外一个就是插件，嗯就是 ESLint 的插件生态也是非常强大的。比如说你要 lint react 的代码的话就有 eslint-plugin-react.你要 lint vue 的代码的话就有 eslint-plugin-vue.他们也都有一些推荐的配置你可以直接使用。再有的话就是和 typescript 的集成，就是你需要使用 @typescript-eslint/parser 来解析你的 typescript 代码。同时你可能还需要安装 @typescript-eslint/eslint-plugin 来使用一些额外的 typescript 相关的规则。 女生: ESLint 它的内部的引擎的架构是什么样子的呢？ 男生: 它的架构是非常模块化的一个架构嗯就是它的每一个部分都只负责一件事情。比如说它有一个 cli.js 就是它的命令行的入口。它只负责解析你命令行的参数，然后它有一个 ESLint 的类，它是一个比较高级的 API 它会帮你去统筹整个检查的过程。它有一个 Linter 就是它的核心的检查引擎，它只负责拿到你的代码和配置对它进行检查。它还有一些模块是专门用来存放规则的。还有一些模块是专门用来处理你的源代码的解析的。所以它的这种解耦就会让它非常容易去扩展或者说非常容易去维护。 女生: 听起来确实设计的非常精妙啊！ 男生: 是的是的对然后这里面最重要的一个概念就是抽象语法树，嗯就是 ESLint 它是通过。把你的代码解析成一棵抽象语法树它的规则是基于这棵树来进行静态分析的。其实这也是整个现代的 JavaScript 工具生态的一个核心。就是大家都是通过这种方式来做到非常高效的对代码的检查和转换。 女生: 好的今天咱们聊了这么多啊从 ESLint 的基础概念到它的配置到它的一些生态系统的实践。然后再到它的核心的原理。呃希望大家对这个工具能够有一个比较全面的认识吧。 男生: OK 了那么以上就是这期播客的全部内容啦，感谢大家的收听，然后咱们下期再见拜拜！

参考资料： https://docs.google.com/document/d/1NC94zXsHPvtj9PT33WANyGZJ6AKcK9oYezQfEIMY7yg/edit?usp=sharing

女生: 哈喽大家好欢迎收听，我们这一期播客啊然后咱们今天来聊一聊。前端脚手架的一个发展的过程一些工具的特点，以及在企业级项目里面我们如何去挑选。或者说如何去设计一个适合自己的脚手架的架构模式。 男生: 听起来很有意思啊那我们就直接开始吧好啊看看这个脚手架背后到底都有哪些。哲学和实践。 女生: 我们就先从，前端脚手架的一个基本的演进过程来开始聊起吧，啊就是为什么会出现脚手架，它背后解决的是什么问题？ 男生: 其实就是因为前端的这个领域在过去的十年里面。爆炸式的增长啊然后从一个非常简单的。几个 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 了以上就是这期播客的全部内容啦感谢大家的收听咱们下期再见拜拜！