从今年二月份开始到现在，笔者一直在维护者两个项目，其中一个项目是从 2 月份开始新建文档，到了三月份的时候准备一些春招面试，搁置了一些，到了四月份之后又断断续续进行开发了，直到 6 月中旬才开发出了一个完整版的。
第一个项目是一个前端脚手架，而第二个项目是基于第一个项目开发的，从七月底开始新建文件夹，也是因为一些面试的原因，断断续续的开发了一个多月，目前也是进入了一个能使用的状态，它是一个在线代码编辑器。
在开始之前，先来贴上这两个项目的地址吧：
那么接下来就分别介绍一下这两个项目的基本架构以及未来会做一些什么样的事情吧!
前端脚手架 create-neat
这个项目产生的背景就是在刚开始学习 React 的时候，使用的脚手架就是 create-react-app，虽然这个脚手架提供的零配置、开箱即用很适合新手，但是要想对其进行扩展就非常麻烦。要想对其进行扩展你必须 eject 或者 使用 carco 进行配置。
还有另外一个问题就是尽管 Typescript 已经流行了很久，但是要从零设计一个 Typescript 库依旧麻烦，本人也曾有过从零搭建一个 React 组件库的想法，但是对一堆陌生的配置望而生畏。
Create-Neat 就是为了解决这些问题应运而生的，解决以上所有问题，开箱即用，零配置。
具体一些更详细的信息直接看 Github 文档吧。
技术选型
monorepo 策略
首先项目采用的是 pnpm+monorepo 的策略开发的，至于 pnpm 有多好用就应该不用我说了，为什么采用 monorepo 的架构呢？
下图是整个项目中用到的一些子包，如下图所示：
utils 包为一个公告模块包的，它是使用 ts 去编写的，然后使用 ts 编译出两套代码，一套是 cjs，一套是 esm。
之所以要这样做，是因为 webpack-react、webpack-vue 这两个包是关于的 webpack 的一些配置，所以采用的是 cjs 的方式。
而脚手架 core 和 rollup-script 的配置采用的是 esm 的方式，所以要分别导出两套不同的模式供不同的包使用。
webpack 核心
整个脚手架的核心就是它是将一个 webpack 封装成了一个 npm 包，然后提供给前端项目使用，使用 bin 命令的方式去启动整个 webpack。
以 webpack-react 为例子，它的目录结构分为以下内容：
file
├───📁 bin/
│ └───📄 candy-script.js
├───📁 config/
│ ├───📄 env.js
│ ├───📄 utils.js
│ ├───📄 webpack.common.js
│ ├───📄 webpack.dev.js
│ └───📄 webpack.prod.js
├───📁 node_modules/
│ ├───📁 .bin/
│ │ └───...
│ ├───📁 @babel/
│ │ └───...
│ ├───📁 @laconic/
│ │ └───...
│ ├───📁 @obstinate/
│ ├───📁 @pmmmwh/
│ │ └───...
│ └───📁 @typescript-eslint/
│ └───...
├───📁 script/
│ ├───📄 analyzer.js
│ ├───📄 build.js
│ └───📄 start.js
├───📄 package.json
└───📄 README.md在 config 目录下的是一些关于的 webpack 配置，那么有认真看的朋友可能会问了，文档里面说的是如何做到的用户可以自定义 webpack 配置呢？
来，直接看代码：
首先内部它有一些已经完全配置好了的 webpack 配置，这也是有些人会问项目里面没有一个 webpack 配置也能运行项目的原因了。
它首先会判断你项目中是否有 webpack.config.js 这个人间，然后再去用 require 的方式去读取整个文件，通过整个方式去实现用户自定义 webpack 的方式。
那么它整个项目是如何启动的呢？ 首先你会在终端里执行如下命令:
bash
pnpm start
npm start然后会执行一个 bin 命令 candy-script,通过 bin 命令会使用 node 开启子进程的方式去执行一个文件，它会根据你输入的参数去执行不同的文件，以 start 为例，它会启动 start.js 文件，在这个文件中，它会获取到 webpack 的所有配置，并且会在这个文件中去设置 devServer 相关信息。
最后将所有的 webpack 配置信息传递给 webpack 提供的函数，执行调用，返回一个 compiler，最后将这个 compiler 传递给 webpack-dev-server 进行启动，如下图所示：
最后使用 compiler 去监听不同的声明钩子函数，例如编译完成之后会有什么样的输出，编译的过程中会有什么样的显示：
脚手架核心
脚手架这边就没有什么好说的，它会根据用户的选择，去通过 axios 的方式去下载不同的 npm 的 tgz 文件，然后解压到对应的目录： 
这里是一些相关的模板包，它会被发布到 npm 上面，然后会生成一个对应的 tgz 链接：
这里就是一些相关下载文件的逻辑，详情可以看看源码，这里就不详细讲了：
整个脚手架的架构就大概有这些功能，其中还有很多有趣的事情都没有细讲的。
在线代码编辑器
这个项目在不久前就写过一篇文章，这里就不讲了吧，可以直接看这篇文章：
这里就再展示一个新增的功能吧，这里全都是使用前端开发的，你应该会很感兴趣！！！
首先打开项目，选择相对应的文件：
这个时候你会跳转到相对应的页面，并且你能看到你所选择的文件，如下图所示：
我们在这里去创建一些文件，如下图所示：
我们创建了一些文件，并通过下载文件：
查找到下载的文件，你会发现文件被下载到本地了：
做这个功能的需求就是后面会做一些代码分享之类的，或者远程修复 bug，通过这种方式可以上传本地代码到这里，然后保存被修改后的代码到本地。
emmm，大概就讲这些吧。
几个月的开源经历，我的所思所想
先来讲讲收获吧，靠着这两个项目，相对于应届生而言，这 star 数也还算可以了，并且项目比较新颖或者特别，并不是说像网上那种烂大街的项目，就简历而言，应该也是加了不少分的。
代码方面，因为这是要面向很多人的，所以要想别人能看得懂，所以会考虑一些编码习惯以及一些代码美化，这样就会慢慢形成一种符合主流的一种编码规范。
再开发的过程中，可能你要实现一个特别难的需求，你会学习到一些新的技术，并且能知道为什么要悬着它，通过这种方式，也是一种提高技术广度的方法。
最主要或者说最开心的事情还是能通过自己的项目能去帮助到别人吧：
