前端搭建自己的脚手架

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

//登录成功后执行
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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端搭建自己的脚手架相关推荐

altium designer无法创建工程_前端工程化之开发脚手架及封装自动化构建
工程化笔记 . . 光前端工程化简述简述一切能提升前端开发效率,提高前端应用质量的手段和工具都是前端工程化. 模块化,组件化,规范化,自动化. 解决的问题传统语言或语法的弊端. 无法使用模块 ...
从零搭建Spring Boot脚手架（2）：增加通用的功能
1. 前言上一篇说了我要一步步地搭建Spring Boot脚手架,首先会集成Spring MVC并进行定制化以满足日常开发的需要,我们先做一些刚性的需求定制,后续再补充细节.如果你看了本文有什么问题 ...
从零搭建Spring Boot脚手架（2）：增加通用的功能（转载）
前言上一篇说了我要一步步地搭建Spring Boot脚手架,首先会集成Spring MVC并进行定制化以满足日常开发的需要,我们先做一些刚性的需求定制,后续再补充细节.如果你看了本文有什么问题可以留 ...
前端工程化实战 - 开发脚手架
文章目录一.工程化概述 1.1 工程化的定义和主要解决的问题 1.2 一个项目过程中工程化的表现 1.3 工程化 ≠ 某个工具 1.4 工程化与 Node.js 二.脚手架工具 2.1 脚手架工具概 ...
搭建vue项目脚手架_逆战班出品
搭建vue项目脚手架 1. 安装执行以下命令(npm) npm install @vue/cli -g//全局安装创建目录 vue create 目录文件名进入目录 cd 目录文件名启动项目 ...
xshell部署web项目_前端轻量化部署脚手架实践
背景传统的前端代码手工部署流程如下: 手工部署流程传统的手工部署需要经历: 1.打包,本地运行npm run build打包生成dist文件夹. 2.ssh连接服务器,切换路径到web对应目录下. ...
springboot项目结构_从零搭建Spring Boot脚手架（1）：开篇以及技术选型
1. 前言目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...
从零搭建Spring Boot脚手架（4）：手写Mybatis通用Mapper
1. 前言今天继续搭建我们的kono Spring Boot脚手架,上一文把国内最流行的ORM框架Mybatis也集成了进去.但是很多时候我们希望有一些开箱即用的通用Mapper来简化我们的开发.我 ...
从零搭建Spring Boot脚手架：开篇以及技术选型1
1. 前言目前Spring Boot已经成为主流的Java Web开发框架,熟练掌握Spring Boot并能够根据业务来定制Spring Boot成为一个Java开发者的必备技巧,但是总是零零碎碎 ...

前端搭建自己的脚手架

前端搭建自己的脚手架相关推荐

最新文章

热门文章