博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端搭建自己的脚手架
阅读量:4085 次
发布时间:2019-05-25

本文共 1444 字,大约阅读时间需要 4 分钟。

1、首先说下为什么要做自己的脚手架:

a) 公司项目大部分公共可以复用
b) 每次搭建项目花时间太多,时间都花在webpack配置上面啦
2、我们需要的脚手架的功能--->只需要下载项目结构代码就好
3、思路:
a) 准备好脚手架模板
b) 把脚手架模板放到GitHub或者其他git服务器
c) 最后执行一句(xx-cli init 'project name') 可以下载模板
4、开始撸代码(在网上找了很多脚手架帖子,发现都太复杂啦, 不是我想要的。 我只是需要简单的下载项目的模板就好)
一、准备一个npm账号(没有自己去npm官网去注册)
二、将准备好的模板代码放到git服务器(您可以放到GitHub,自己的git服务器)
三、创建一个空文件夹在里面执行npm init(初始化项目),生产一个package.json文件
四、在package.json文件加上

 

.... "bin": {        "xxx-cli": "index.js"  },....

五、使用第三方库:

child_process -执行shll命令
commander --注册命令-很强大的一个库

 

//执行下面代码npm install commander child_process --save

六、新建一个index.js放入以下代码:

 

const program = require('commander');var process1 = require('child_process');//version 版本号//name 新项目名称program.version('1.0.0', '-v, --version')    .command('init 
') .action((name) => { console.log('clone template ...'); process1.exec('git clone (git 下载地址) ' + name, function(error, stdout, stderr) { if (error !== null) { console.log('exec error: ' + error); return; } console.log(stdout); console.log('clone success'); }); });program.parse(process.argv);

七、发布npm

 

//执行npm login

login

 

//登录成功后执行npm publish

八、发布完成后您就可以执行以下代码测试啦:

 

//先全局安装您的xx-clinpm install xx-cli -g//安装完成后执行下面代码看下版本xx-cli -v//最后执行-看下面结果截图xx-cli init 

测试版本截图

 

version

 

效果图:

 

result

如果需要复杂的脚手架可以扩展!!!!!不喜勿喷

作者:damon小萧
链接:https://www.jianshu.com/p/95eefebd1e89
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的文章
SpringCloud学习之PassCloud——(一)PassCloud源代码下载
查看>>
Linux下安装Python环境并部署NLP项目
查看>>
Nginx篇-springCloud配置Gateway+Nginx进行反向代理和负载均衡
查看>>
Nginx篇-Nginx配置动静分离
查看>>
缓存篇-Redis缓存失效以及解决方案
查看>>
缓存篇-使用Redis进行分布式锁应用
查看>>
缓存篇-Redisson的使用
查看>>
phpquery抓取网站内容简单介绍
查看>>
找工作准备的方向(4月22日写的)
查看>>
关于fwrite写入文件后打开查看是乱码的问题
查看>>
用结构体指针前必须要用malloc,不然会出现段错误
查看>>
Linux系统中的美
查看>>
一些实战项目(linux应用层编程,多线程编程,网络编程)
查看>>
我觉得专注于去学东西就好了,与世无争。
查看>>
原来k8s docker是用go语言写的,和现在所讲的go是一个东西!
查看>>
STM32CubeMX 真的不要太好用
查看>>
STM32CubeMX介绍、下载与安装
查看>>
不要买铝合金机架的无人机,不耐摔,易变形弯曲。
查看>>
ACfly也是基于FreeRTOS的
查看>>
F330装GPS的位置
查看>>