详解基于node.js的脚手架工具开发经历-创新互联

前言

公司主营业务：网站制作、成都网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联公司推出桂阳免费做网站回馈大家。

我们团队的前端项目是基于一套内部的后台框架进行开发的，这套框架是基于vue和ElementUI进行了一些定制化包装，并加入了一些自己团队设计的模块，可以进一步简化后台页面的开发工作。

这套框架拆分为基础组件模块，用户权限模块，数据图表模块三个模块，后台业务层的开发至少要基于基础组件模块，可以根据具体需要加入用户权限模块或者数据图表模块。尽管vue提供了一些脚手架工具vue-cli，但由于我们的项目是基于多页面的配置进行开发和打包，与vue-cli生成的项目结构和配置有些不一样，所以创建项目的时候，仍然需要人工去修改很多地方，甚至为了方便，直接从之前的项目copy过来然后进行魔改。表面上看问题不大，但其实存在很多问题：

• 重复性工作，繁琐而且浪费时间
• copy过来的模板容易存在无关的代码
• 项目中有很多需要配置的地方，容易忽略一些配置点，进而埋坑
• 人工操作永远都有可能犯错，建新项目时，总要花时间去排错
• 内部框架也在不停的迭代，人工建项目往往不知道框架最新的版本号是多少，使用旧版本的框架可能会重新引入一些bug

针对以上问题，我开发了一个脚手架工具，可以根据交互动态生成项目结构，自动添加依赖和配置，并移除不需要的文件。

接下来整理一下我的整个开发经历。

基本思路

开始撸代码之前，先捋一捋思路。其实，在实现自己的脚手架之前，我反复整理分析了vue-cli的实现，发现很多有意思的模块，并从中借鉴了它的一些好的思想。

vue-cli是将项目模板作为资源独立发布在git上，然后在运行的时候将模板下载下来，经过模板引擎渲染，最后生成工程。这样将项目模板与工具分离的目的主要是，项目模板负责项目的结构和依赖配置，脚手架负责项目构建的流程，这两部分并没有太大的关联，通过分离，可以确保这两部分独立维护。假如项目的结构、依赖项或者配置有变动，只需要更新项目模板即可。

参照vue-cli的思路，我也将项目模板独立发布到git上，然后通过脚手架工具下载下来，经过与脚手架的交互获取新项目的信息，并将交互的输入作为元信息渲染项目模板，最终得到项目的基础结构。

工程结构

工程基于 nodejs 8.4 以及 ES6 进行开发，目录结构如下

/bin # ------ 命令执行文件
/lib # ------ 工具模块
package.json

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

名称栏目：详解基于node.js的脚手架工具开发经历-创新互联
网页网址：http://cdxtjz.cn/article/diiedg.html