前言
小张是一枚工作了3年的前端攻城狮,在公司也算一名“老油条”,新需求来了,对于他来说也是信手拈来,虽然996,日子也倒算安逸。
直到有一天,经理安排了一个node的项目。小张平时也学过相关知识,自身有些底子。但事情好像不那么顺利,虽然需求本身的量不大,但需要自己搭建一套应用。小张没有太多的服务端开发经验。苦恼之下,突然灵光乍现,想到借助同事之前的项目,将多余带来删掉,这样不就好了么。
哪知,这才是噩梦的开始,由于项目各种依赖,一不小心就会各种报错。好不容易,开发完成,线上也是经常暴露些莫名其妙的问题。
不出意外,小张被经理请去喝了杯枸杞泡茶。
"我其实能做的很好的,可却把大部分精力花在了需求之外的事情上",回到家,小张瘫坐在床上,委屈的自语道。
恰巧从隔壁串门回来的老王听到,随口说了句,“这是你们公司工程化太薄弱了,后面有的苦吃呢”。
为什么每个企业都要做工程化
小张转头望着这位从搬来就神龙箭头不见尾的陌生室友,倒有些欣喜。虽然老王平日总是不着调,但毕竟是某大互联网公司的架构师,难得有机会被指点一两招,小张欣喜的跳到老王面前。
“大佬,请指点指点小弟”,小张满眼期待的望着老王。
老王轻抚了下头上的仅剩的莫妮卡和简妮,正襟道:“工程化就是为了解决平日里开发的繁琐工作,大量重复且费时的工作可以通过一些工具来解决,说白了就是为了让开发更多精力花在关键开发中。”
顺势,小张说出了最近的困扰。
“你用过VUE和REACT的CLI吧,其实你完全可以做一个适合自己公司的CLI”,老王故作神秘道。
“然后呢,具体该怎么做呢?”,小张期待的问道。
“我有点饿了,脑子秀逗了...”,老王一脸狡诈。
“好说,老规矩,一顿烧烤,一瓶霸王”,说完,两人朝着孙寡妇的烧烤摊走去。
基本思路
酒足饭饱,老王也是知无不言。
vue-cli就是将项目模板作为独立项目,放在git上,本地安装cli,通过指令将模板下载到本地,然后通过模板引擎渲染,创建出新的项目。
我们完全可以参考此思路,将包含公司使用的工具库、UI库包含到项目中,使用时,直接通过指令创建。这样不管是WebPC、MobileH5、Node、小程序,都可以快速创建,且只需要关注模板的优化即可,一劳永逸。
小张听后,满心激动,构思着各种方案设计。
工程结构
第二天,小张早早的来到公司,和经理沟通了自己的想法。经理大大赞扬,并将任务交给了小张。
重拾信心,小张查找各种资料,整理出一个较为理想的方案。
项目流程:
首先,搭建项目。
/bin # ------ 命令执行文件
/lib # ------ 工具模块
package.json
关键库介绍
#!/usr/bin/env node
在写npm包的时候需要在脚本的第一行写上#!/usr/bin/env node ,用于指明该脚本文件要使用node来执行。
commander.js
node.js命令行界面的完整解决方案,受Ruby Commander启发。详情点击这里
download-git-repo
下载工具,支持下载GitHub, GitLab, Bitbucket中的项目。
inquirer.js
命令行交互库,支持单选、多选、询问选择等交互处理。

metalsmith
一个非常简单,可插拔的静态网站生成器。在 Metalsmith 中,所有的逻辑都是由插件来处理的。 你只需将它们链接在一起。
工作原理:
读取源目录中的所有文件。
调用一系列操纵文件的插件。
将结果写入目标目录!
美化脚手架
ora
优雅的终端转轮
[图片上传失败...(image-3d0b53-1605013392166)]
chalk
chalk 包的作用是修改控制台中字符串的样式,包括:
字体样式(加粗、隐藏等)
字体颜色
背景颜色
AlphabetJS
专门用于输出文字图案的小工具。详情点击这里
总结
一番折腾,终于搞出了个样子:

打开思路的小张,现在思绪万千。
那我是不是可以通过工具打通告警系统、发布系统等系统呢,这样,真的可以一键开发了。
(待续...)


