2023.6 拒绝重复搬砖！使用node来写个通用模板吧(二)

2023.6 拒绝重复搬砖！使用node来写个通用模板吧(二).jpeg

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。

该文章接2023.5 ElementUI源码-样式系统（一）后续

终极版（大佬指导下提供的思路）

• 使用命令根据配置生成json配置
• 读取json配置实现页面展示

这个版本主要是为了优化项目体积问题。

难点：

项目中的路径是在公司的权限系统中进行配置的，按照上面这种思路后续我们只每次配置菜单为同一个就好了。

image.png

初步考虑：

将所有的配置项生成一个配置文件，初始化一个模板文件，写一个程序通过解析配置文件和模板文件来生成最终的模板文件。

问题一：

我们可以将配置生成一个配置文件，但是表单项的内容我们无法控制，且有一部分内容不是在我们前端写页面阶段就可以决定的，例如，表单项的字段配置，表格项的字段配置。

另外，读取模板的问题，可以看到我们配置的菜单路径是不带文件后缀的，默认引入的就是目标目录下的index.vue文件，因此我们需要判断如果是使用配置文件的方式，我们需要判断目标目录下的文件如果是.vue的结尾的，就不处理，如果是以.json配置的就需要我们自己处理，首先，需要读取配置文件，然后将组件替换成统一一个文件模板的路径。

问题二：

因为我们的程序是运行在浏览器端的，所以无法使用服务端的api，无法操作node:fs模块

结论：

因此该方案不可用。

新思路：

但是我们可以考虑将配置文件放在bin目录下面，每次生成模板的代码读取bin目录下的配置文件，然后将生成的文件放在目标目录。

我们可以在模板生成的代码中读取配置，然后将配置内容按照参数的方式传参到模板里面，进而动态生成模板。

遇到的模板语法嵌套模板语法的问题，可以使用转义符号进行转义
例如：

//最终代码
`start: \`\${dayjs().format('YYYY-MM-DD')} 00:00:00\``
//想要生成的代码
start: `${dayjs().format('YYYY-MM-DD')} 00:00:00`

进阶版代码：github

V1代码：createBillTemplate.js

V2代码：createBillTemplateV2.js+template.json

image.png