看vue3源码能够学到什么 : 4、代码模版生成器

前言

前面的篇章里了从readme文档中了解了vue3的目标特性，收获了git log规范，及熟悉了一款模块管理工具lerna。本章为你们分享另外一项干货，代码模版生成器。

内容

• vue3使用的简单代码模版工具 学习开源的JS框架的时，为了解框架的开发构建方式，通常会查看package.json .scripts属性，上面会有对应的npm脚本命令以供开发调试。vue3 对应package.json中的命令以下，对应执行的内容均在./script文件夹下。可是仔细查看会发现有一个名为 ./bootstrap.js并不在npm配置的命令中。那么它是用来干吗的呢，当时个人第一反应是lerna的启动命令，用来初始化package中对应模块的依赖的。然而打开文件内容后发现并不是如此，该文件与lerna没有任何关系，是一个没有依赖的简单的代码模版生产器。

• bootstarp.js 主要的使用步骤为在生成须要对应模块时执行 node ./bootstarp.js -- 模块名称。该命令会作以下操做，校验模块项目是否已经生成。若是未则生成指定模块名称的文件夹到packages目录下，且初始化模块内容生成公共的文件,有此命令能够保证每一个模块有统一的项目架构和标准的初始化方式。包括

1. /模块名称/index.js /模块名称/index.ts
2. /模块名称/dist/模块名称.esm-bundler.js
3. /模块名称/README.md
4. /模块名称/api-extractor.json
5. /模块名称/package.json

   

• 启示 在业务开发过程当中，不管是前端项目，仍是后台服务都可以有统一的项目模版生成器平台，提供灵活配置生成统一的项目框架。之前端为例目前虽然vue，react或者angular均有对应的脚手架工具。可是都是只提供有基础的配置，不少状况下建立完成后仍须要加入大量的其余组件依赖或者，业务配置。在公司有必定规模后，有必要提供一套公共的项目生成服务或者平台供业务组快速搭建项目。
• 实现 若是想实现一套平台式的代码模版生成器，一种可行的思路是借鉴vue-cli将命令式的方式改形成web模式，公用的配置属性抽象成可配置表单，代码模版使用ejs，jade等等都可。

总结

在业务发展迅速，常常新项目【包含先后端】建立的状况下，能够考虑一套标准化的项目建立方式提高建立项目的效率及为后续维护，扩展，升级提供良好保障。

发散问题

• 当前是否有面临新建项目时周期很长的问题，所开发的项目类型有没有很好的项目模版标准划建立方案，或者公司是否有一套标准化项目建立的平台

以上问题，平时在工做中有了解或者有最佳实践的同窗也能够不吝分享一块儿提升

若有任何问题或者建议能够随时沟通交流反馈，谢谢