命令行集成工具开发及分布式路由recdi-cli前端脚手架实例

26 篇文章 0 订阅
24 篇文章 0 订阅

在前端开发工程中,实现项目自动化和工程化越来越重要,而每次搭建前端项目的时候,很多文件都源自复制粘贴,这是一些重复的工作。虽然现在已经有了很多大的脚手架生成工具,像create-react-app, vue-cli,但是这些工具生成的脚手架可能和我们的业务场景相差较远,生成过后还需要手动更改,也是比较麻烦的,另外,对于自己封装的脚手架可以加入定制的东西,对于开发团队而言,扩展性较强。

前端脚手架开发的步骤:

1,npm账号和注册,还有相关发布流程的了解,这里不再赘述,自行google

2,命令行集成工具开发

3,模板开发

4,模板通过命令行工具生成文件

5,测试,发布

一,首先看下命令行集成工具(recd-cli项目为例)

node的出现使得通过命令行和用户交互更加方便,所谓命令行集成工具,就是封装一个工具包,在终端输入不同的command时,进行不同的操作。

开发步骤:

1,npm init  [name]你要创建的cli的名称

npm init recdi-cli  

2,安装commander,inquire,figlet,ora,chalk工具

commaner 用来指定命令,及命令选项

inquier 用来和用户交互

figlet 输出终端特殊字体

ora  实现进程运行的图标icon 例如运行中,失败,成功,警告

chalk 终端字体颜色控制

commander使用:commander

3,在package.json中指定命令行对应的文件

相关代码参见github

二,创建react项目模板

1,webpack 开发环境和生产环境配置文件编写

2,基于react-hot-loader,webpack-dev-server配置热更新

3,路由生成文件编写

4,demo编写

三, 将react脚手架模板通过fs模块生成文件并写入,中间使用inquire执行交互,fs模块写入

recd-cli项目实例地址:github

欢迎提问题和建议

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值