前端搭建自己的脚手架

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

如果需要复杂的脚手架可以扩展!!!!!不喜勿喷
个人喜好把~~~~!!!!!
如有问题,欢迎大家,可以加Q讨论哦:1366379285,加好友备注“简书”
长沙地区可以加微信群:


qcode.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容