过去六个月的大部分精力都投入到业务组件库上，而在业务组件库的开发和维护上，我的其他主要是整个工程过程的构件库（或材料资产）。这篇文章不是教学文章，只是近六个月的一部分工作的总结，也是给自己的一个备忘录，而且由于是公司内部资产，很多地方不能贴出源代码和截图，如果大家对内容感兴趣欢迎一起讨论。浅谈前端工程在我看来，前端工程是指将平时工作流程中繁琐重复的工作以工具的形式沉淀一部分，减少开发机械化同学的重复劳动。这里的工具不局限于本地项目脚本、云服务等，例如：我们使用CRA初始化工程项目，使用Webpack/Vite打包构建项目，使用云服务启动前端项目等等.从我个人的经验来看，凡是开发中涉及到的简单重复的机械劳动，都可以通过工程能力或多或少得到显着的提升。前端工程与性能优化一样多，而本文的主要切入点是前端工程中的自动化，利用工程自动化的能力穿透素材系统的初始化->开发->构建->online全生命周期，拒绝一切没有效率。从生命周期的角度来看，工程全过程的初始化阶段对于初始化阶段，素材端提供组件/块的初始化模板，方便组件/块的快速初始化。在开发阶段，作为素材系统的展示站点，包括组件、区块、解决方案、工具集等多维度的前端资产。因此采用了MutiRepo架构，完全脱离了传统的npm链接包开发模式。组件端&素材端，开发脚本启动后，实时监控源码变化，同步到站点缓存目录。在站点端添加.dev目录作为本地开发的缓存目录，在dev模式下将组件库别名为.dev开发目录。并在Vite的加持下，不断完善开发体验。在冷启动阶段，本地开发脚本会预先检查.dev目录的合法性，如果不合法则将node_modules下的组件源码全量拷贝一份作为临时缓存文件。在热更新阶段，devServer监听.dev目录文件的变化并实时更新。更多本地开发可以参考我之前的文章：使用Vite加速你的生产力构建阶段素材端构建阶段就是搭建生成ESM包和ES5包。这里主要说一下建站端的时候要做什么。生成文档由于组件库完全是通过符合jsdoc规范的ts+注解开发的，所以我们在文档化步骤中使用脚本：扫描所有组件目录；通过typedoc解析组件类型声明和注解，生成文档ASTJSON；然后站点正在运行解析文档ASTJSON并生成文档。生成依赖我们展示站点的另一个功能是展示当前业务组件所依赖的原子组件，并生成依赖图。类似生成文档的逻辑，我们通过脚本扫描业务组件目录，解析业务组件的AST，生成依赖JSON，站点会在运行时动态加载JSON来展示依赖的三极图。生成组件基本信息组件的元数据已经存在于组件源码中，无需站点侧二次维护。因此，我们在生成依赖的同时，通过AST解析组件中的元数据，生成组件基本信息JSON。站点会在运行时动态加载JSON，展示组件名称、组件设计者、组件描述、组件设计稿等信息。在上一篇同步区块代码的文章中，我们看到了来自业务组件库的前端素材生态分享。我们的区块都是以源码的形式存储的，构建时只需要实时拉取最新的源码即可。因此，我们通过工程脚本来实现。函数如下：对于区块：读取区块Container目录；分析Container下的blockvariant依赖关系；通过工具拉动主/子块；在站点运行时加载代码；解决方案：阅读材料。json文件获取解决方案依赖；通过工具拉动主要/子块；在站点运行时加载代码；上传Demo我们业务组件库的demo预览实现方式与其他组件库不同，开发时通过markdown传入，在上面写一个Demo，编译时将markdown解析成HTML。我们的业务组件库Demo会以tsx源码的形式存储在本站，构建时上传到CDN，运行时加载到CDN源码资源进行实时预览。在发布阶段，从素材到站点的发布，我们有严格的链式发布流程：首先，对于组件和块，我们使用自动化发布工具materials-tools-release自动发布npm和cdn，减少代码合并，分支检查、版本检测、自动化脚本、发布和其他步骤会降低成本并降低出错风险。以前的版本（以组件库为例）：这是一个规范，没什么好说的；你可能会忘记这一步；你可能会忘记这一步；你也可以忘记这一步；你也可能忘记了这一步，也可能忘记了；这一步可能是你最容易忘记的一步，但它可以通过prepublish钩子来弥补；这一步可能是您将执行的唯一步骤；我想你甚至可能不知道它是什么；当前版本：更少的步骤意味着更少的错误。最后，站点部署。工具沉淀在这个过程中，我们沉淀了一套服务于通用组件库场景的工具。materials-tools-ast做了一个基于babel的二次包，可以很方便的获取导入导出文件的能力。分析组件派生关系materials-tools-climaterial-tools-cli主要提供了两部分能力：materialpullkernel+materialpullclitool。其中，内核为cli工具服务，vscode插件主要做以下工作：识别素材是否存在，识别当前目录是否有同名素材；根据素材名称从CDN拉取素材；根据拉取的素材依赖合并依赖并提示；materials-tools-utils封装了工程脚本开发过程中常用的工具功能：file.ts：文件操作；log.ts：日志输出；command.ts：命令行执行操作；materials-tools-release自动发布工具，降低代码合并、分支持久化、版本检测、自动化脚本、发布等步骤的成本和出错风险。该工具集的自动化发布工具集采用基于lerna的MonoRepo架构，但是lerna不能满足我们的一些需求（比如我们有很多需求统一自定义npmhooks），所以我们做了两个基于lerna的二次封装：通过lernachanged获取更新和发布的包版本信息；通过lernaversion更新要发布的包版本；按照配置文件排序，比如a依赖b，b依赖c，则排序为c->b->a；根据自定义钩子的执行顺序，按照排序后的列表依次执行；发布;
