简历缺少有技术深度的项目吗？最近在做开源，实现一个脚手架，涉及广泛的工程化知识。
如果你感兴趣参与贡献，或者想加入社区聊聊技术、工作、八卦，可以添加我的联系方式：Tongxx_yj。
GitHub 链接：github.com/xun082/crea…

接手工程化

年底了，有必要好好总结实习以来所做的工作～ 刚入职时，mentor 大哥和我说，团队的工程化存很多的优化空间，希望我后续能先从这切入，没想到这一切入，就过去了一个学期🌝。

对于我这个工程化小白来说，内心是非常不自信的，但转头一想，这无疑是一个宝贵的锻炼机会，平时靠自己也很难接触到这一类的东西，因此也是狠狠给自己打了一波鸡血—— 啥也不会，那先开卷！

这篇文章主要是想分享一下我在工程化需求开发的过程，提供一些学习工程化的建议，并不涉及具体的技术细节，大佬们可以当个乐子放松放松。

做了些啥

一个学期下来，虽然做的事情不多，但在看到成果转化有收益时，会有很大的成就感。下面聊聊我具体做了什么东西。

实现 monorepo 项目支持路径别名的源码引用

支持路径别名 和 monorepo 源码引用 单独实现其实并不麻烦，但结合在一起实现却需要注意很多方面的问题。 但是核心绕不开对编译器和构建工具的配置。

支持路径别名

只需要在目标项目中配置 tsconfig.json 的 compilerOptions.path，同时在构建工具配置中设置相应的 alias 即可。

monorepo 源码引用

在目标项目中配置 compilerOptions.path，引用方设置相同的路径别名，通过 references 配置指定引用目标项目，一个简易的实现就完成了。

结合配置

我们在基于 支持路径别名 之后，通过在引用方的构建工具中配置一个插件，读取目标项目的 alias 并设置，就可以简单实现编译器和构建工具对路径别名的源码引用和路径提示。
当然还有更多的细节，在这里有详细介绍：说来惭愧，入职的第一个需求居然花了我两多个月？！😭

主项目的构建工具升级

最最最大头且头大的玩意，从最开始的估时一周到接近三个月的开测时间，被形形色色的 Error 折磨的五体投地。
本以为通过制定的升级包一键升级即可，但升级之后，各种配置策略的变化，项目本身的自定义需求，都产生了极大的问题。
然而在整个过程中，还是学到了很多东西，也是想着后续逐个写成文章分享出来，比如：

1. 手写插件实现外部 CDN 插入 html 模版
2. 研究 babel-runtime 对包体积的优化
3. 针对生产、开发环境做不同打包策略
4. 如何有效拆包……

已经填好的坑如下：

babel-runtime 如何缩小打包体积

lint 升级

一个比较轻松的需求，通过司内包升级了老旧的 lint 工具，但由于升级后继承规则集发生变化，产生了数以万计的 Error、Warning，为此给出了暂时的处理方案：

清除错误

依据报错信息右侧的规则名，在 eslintrc.json 中配置忽略字段。

如：

"@typescript-eslint/no-unused-vars": "off", // 禁用未使用的变量

但是要注意，最好将暂时 “off” 的规则集中在一块并区分 Error、Warning,方便后续重新启用规则。

治理方案

对于 lint 的治理是比较麻烦的，计划在后面约会议，通知大家某版本打开某几个规则，统一修复，同时要求大家遵守新开的几个代码规则，如此反复慢慢推进，随着规则的完善，对整个团队的 code review 也会提供不小的帮助。

新增 CI 卡点

为了提高代码的安全性，需要在 CI 上设置 lint 检查和 ts 类型检查的卡点，为此我申请独立开了一个存放脚本的仓库，对一些基本操作（通用执行原子任务、记录原子任务执行时间等）做了封装，以便后续新增更多的卡点需求。

关于代码实现，我在代码管理平台上设置了触发流水线，通过指定的 shell 脚本执行对应的 ts 文件，实现的操作有：安装 nvm，选择合适的 node 环境 -> 拉取指定代码，安装依赖 -> Lint 检查 -> ts 检查 -> 输出日志。

于此同时，在项目本地也相应地添加了相关的检查点。

截止年前基本就完成了这几件事，年后还有一堆安排在等待中，坚持下去✊！

历程总结

对于收获，我在工程化的很多方面都得到了质的飞跃，已经彻底摆脱了唯唯诺诺的自己。

在真正打开工程化的大门之后，我也逐渐找到了节奏，希望在接下来能越走越深，早日做到 owner 团队的工程化，但也要争取做一些业务。对于工程化，建议没接触过的同学一定要结合实际的需求去做做，虽然机会比较少，但一定要争取争取。

在平时 coding 中，可以主动地探索项目工程化的优化方向，结合社区建议实现相关的方案，多搓 demo 练练手，能力会在不经意间沉淀出来～（可以多和技术友交流方案，也可以来狠狠拷打我🌞）

举个例子，在一个项目开发过程中，把遇到的所有不爽的点整理一下，思考能否用工程化的思路解决，比如：

1. 路径太长，且想做功能点区分，可以配置 alias，区分出 组件、API、状态管理等路径别名
2. 想做性能优化，可以配置针对性的拆包、G-zip、组件懒加载、路由懒加载等策略
3. 想设置全局变量，可以在构建工具中依据功能进行配置
4. webpack 胶水代码太多，可以试试 vite、rollup 等新的构建工具，从多个角度比对择优
5. 希望打包时将外部包转化为 CDN，可以结合 htmlWebpackPlugin 插入相关的 CDN
6. 还有很多优化空间，如使用恰当的 loader、plugin 提高整个项目的开发体验、性能

与此同时，要虚心向 mentor、师兄师姐多多学习，多多观察工作习惯，主动咨询各种开发经验，谦虚且厚脸皮肯定混的不差👍！

新一年的期望

简简单单：转正！能不能给我拿个 ssssssssp ！（一本正经

最后，新的一年，希望能静下心来，读一些好书，在工作之余将学到的东西整理成文章分享出来。忙碌之余，也要认真看看世界，享受一下生活，加油！