前端搭建自己的脚手架
前端 搭建 自己 脚手架
2023-09-27 14:29:04 时间
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 <name>')
.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-cli
npm install xx-cli -g
//安装完成后执行下面代码看下版本
xx-cli -v
//最后执行-看下面结果截图
xx-cli init <Project Name>
测试版本截图
version
效果图:
result
如果需要复杂的脚手架可以扩展!!!!!不喜勿喷
作者:damon小萧
链接:https://www.jianshu.com/p/95eefebd1e89
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- photoshop 前端常用技巧
- 微信公众号 - 禁用 H5 网页长按图片时弹出的菜单(转发给朋友 / 保存到手机 / 收藏 / 搜一搜),苹果安卓系统都可暴力 100% 完美禁用菜单,任何前端框架、任何浏览器都适用的解决方案
- 前端php测试案例
- esxi命令行强行关闭通过前端界面无法关闭的ESXI虚拟机
- 前端技术前沿4
- 「基于Django的全民健康智慧中医数字服务平台」前端应用Users设计思路
- 使用 Vercel 快速部署前端项目
- 将后台数据数组对象(对象里边包含数组对象)---改为前端想要的数组对象--改变key值(替换)
- 推荐 7 个 Github 上近 200k Star 的计算机学习资源,练好前端内功的秘籍!
- 一、IIS搭建前端静态模板_资源加载问题
- 浅析前端常见文件下载的9种场景:Blob基础知识/组成/Blob URL、a标签下载、showSaveFilePicker API下载(兼容性差)、FileSaver.js库下载、Zip下载(JSZip库)、附件形式下载(设置Content-Disposition)、base64格式下载(需转为blob)、分块传输下载、HTTP范围请求下载、大文件分块并行下载
- 浅析VUE项目如何使用qiankun搭建微前端架构
- SpringMvc--前端传值&控制器响应
- 【web前端(四十一)】javascript_jquery_文档处理、下表单的添加和删除
- 前端project师养成记:开发环境搭建(Sublime Text必备插件推荐)
- odoo 前端显示错误
- Web 前端 之 Vue webpack 环境的搭建及工程创建简单整理
- 前端表格插件 BootstrapTable 入门教程
- 前端之路何去何从-----思考与总结