You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// 获取github项目列表constrepos=awaitrepoList();choices=repos.map(({ name })=>name);answers=awaitinquirer.prompt([{type : 'list',name : 'repo',message: 'which repo do you want to install?',
choices
}]);// 选择的项目constrepo=answers.repo;// 项目的版本号劣币爱哦consttags=awaittagList(repo);if(tags.length===0){version='';}else{choices=tags.map(({ name })=>name);answers=awaitinquirer.prompt([{type : 'list',name : 'version',message: 'which version do you want to install?',
choices
}]);version=answers.version;}// 下载awaitdownload([repo,version].join('@'));
// 获取本地仓库列表constlist=awaitreaddir(dirs.download);// 选择一个要升级的项目answers=awaitinquirer.prompt([{type : 'list',name : 'scaffold',message: 'which scaffold do you want to update?',choices: list,asyncvalidate(input){constdone=this.async();if(input.length===0){done('You must choice one scaffold to update the version. If not update, Ctrl+C');return;}done(null,true);}}]);constrepo=answers.scaffold;// 获取该项目的版本信息consttags=awaittagList(repo);if(tags.length===0){version='';}else{choices=tags.map(({ name })=>name);answers=awaitinquirer.prompt([{type : 'list',name : 'version',message: 'which version do you want to install?',
choices
}]);version=answers.version;}// 下载覆盖文件awaitdownload([repo,version].join('@'))
搜索
搜索远程的github仓库有哪些项目列表
使用
project search
逻辑
获取github项目列表 ===> 输入搜索的内容 ===> 返回匹配的列表
若中间每一步 数据为空 则给予提示
核心代码
constanswers=awaitinquirer.prompt([{type : 'input',name : 'search',message: 'search repo'}]);if(answers.search){letlist=awaitsearchList();list=list.filter(item=>item.name.indexOf(answers.search)>-1).map(({ name })=>name);console.log('');if(list.length===0){console.log(`${answers.search} is not found`);}console.log(list.join('\n'));console.log('');}
在16年年底的时候,同事聊起脚手架。由于公司业务的
多样性
,前端的灵活性
,让我们不得不思考更通用的脚手架。而不是伴随着前端技术的发展,不断的把时间花在配置
上。于是chef-cli诞生了。 18年年初,把过往一年的东西整理和总结下,重新增强了原有的脚手架project-next-cli, 不单单满足我们团队的需求,也可以满足其他人的需求。project-next-cli
面向的目标用户:
发展
前端这几年(13年-15年)处于高速发展,主要表现:
备注:以下发展过程出现,请不要纠结出现顺序 [捂脸]
开发
当我们真实开发中,会遇到各种各样的业务需求(场景),根据需求和场景选用不同的技术栈,由于技术的进步和不同浏览器运行时的限制,不得不配置对应的环境等,导致我们花费大量时间在工程配置,来应对业务不同需要。
画了一张图来表示,业务,配置(环境),技术之间的关系
前端配置工程师
于是明见流传了一个新的职业,前端配置工程师 O(∩_∩)O~
社区现状
专一的脚手架
社区中存在着大量的专一型框架,主要针对一个目标任务做定制。比如下列脚手架
vue-cli
提供利用vue开发webpack
, 以及 远程克隆生成文件等pwa
等模板,本文脚手架参考了vue-cli
的实现。dva-cli
针对dva开发使用的脚手架think-cli
针对 thinkjs项目创建项目通用脚手架
yeoman
是一款强壮的且有一系列工具的通用型脚手架,但yeoman发布指定package名称,和用其开发工具。具体可点击这里查看yeoman添加生成器规则开发初衷和目标
由于公司形态决定了,业务类型多样,前端技术发展迭代,为了跟进社区发展,更好的完成下列目标而诞生。
实现准备
依托于Github,根据
Github API
来实现,如下:实现逻辑
根据
github api
获取到项目列表和版本号之后,根据输入的名称,选择对应的版本下载到本地私有仓库
,生成到执行目录下。核心流程图如下:。总体设计
>=6.0.0
遵守
单一职责原则
,每个文件为一个单独模块,解决独立的问题。可以自由组合,从而实现复用。以下是最终的目录结构:配置和主框架
使用babel-preset-env保证版本兼容
使用eslint管理代码
使用husky检测提交
使用husky, 来定义git-hooks, 规范git代码提交流程,这里只做
commit
校验在
package.json
配置如下:入口
统一配置和入口,分发到不同单一文件,执行输出。核心代码
本地配置读和写
配置用来获取脚手架的基本设置, 如registry, type等基本信息。
本地配置文件, 格式是 .ini
若中间每一步 数据为空/文件不存在 则给予提示
下面每个命令的实现逻辑。
下载
获取项目列表
获取tag列表
若中间每一步 数据为空/文件不存在 则给予提示
请求代码
下载代码
生成项目
若中间每一步 数据为空/文件不存在/生成目录已重复 则给予提示
其中模板引擎编译实现核心代码如下:
升级/降级版本
若中间每一步 数据为空/文件不存在 则给予提示
搜索
搜索远程的github仓库有哪些项目列表
若中间每一步 数据为空 则给予提示
总结
以上是这款通用脚手架产生的背景,针对用户以及具体实现,该脚手架目前还有一些可以优化的地方:
硬广:如果您觉得project-next-cli好用,欢迎star,也欢迎fork一块维护。
The text was updated successfully, but these errors were encountered: