0
点赞
收藏
分享

微信扫一扫

如何搭建公司内部的脚手架

陈情雅雅 2022-02-03 阅读 66

一直想搭建一套基于vue-cli脚手架,加上公司的业务需求,搭建一个公司内部可使用的脚手架,这样在创建新的项目时,不用拷贝删除代码,实现公司内部前端工程化,基于此目标,我在创建的过程中遇见的问题以及需要用到的东西总结一下
1、npm 制作脚手架工具
2、npm上传脚手架,直接init即可
3、github 生成脚手架代码模板,上传到github
4、测试脚手架工具
一、npm 制作脚手架工具
1、生成一个项目 guhaiye-cli
2、在项目中执行 npm init -y,生成package.json文件
3、安装需要用到的模块 commander,download-git-repo
commander: tj大神开发的可以对命令行做解析的库,可以解析我们在命令行输入的如guhaiye-cli -v或guhaiye-cli init 等命令
download-git-repo: 下载git仓库代码的库
4、在项目根目录创建index.js文件,写入相应的处理逻辑

#! /usr/bin/env node

const program = require('commander');
const download = require('download-git-repo');
//version 版本号
//name 新项目名称
program.version('1.0.0', '-v, --version')
    .command('init <templateName> <projectName>')
    .action((templateName, projectName) => {
        if (templateName === "vue") {
            console.log('clone template ...');
            download('github:junkaicool/jkc-cli-vue-src', projectName, function (err) {
                console.log(err ? 'Error' : 'Success')
            })
        } else if(templateName === "react") {
            console.log('clone template ...');
            download('github:guhaiye/vue-cli-test', projectName, function (err) {
                console.log(err ? 'Error' : 'Success')
            })
        } else {
          console.error('A template name that does not exist')
        }
    });
program.parse(process.argv);
#! /usr/bin/env node是执行这个文件时使用node方式执行
program.version是解析别人输入jkc-cli -v时输出的内容: 1.0.0
command解析输入jkc-cli init vue my-vue-project,init后面两个参数,一个模板名,一个项目名
action是根据上面的两个参数做相应的逻辑处理,判断模板名,去相应的git仓库下载代码。download的第一个参数下载地址不是填我们git的网址,按照我的格式填就行,第二个参数是生成的项目名,第三个参数是错误的回调执行函数。

5、在package.json文件中加入,这一步是我们在命令行guhaiye-cli的时候执行的文件
二、npm上传脚手架,直接init即可
注册一个npm账号
npm login 登录
npm publish 发布
三、github 生成脚手架代码模板,上传到github
基于vue-cli,封装自己的业务代码及组件等
把他们上传到github上,到时候我们用脚手架工具命令其实就是从github下载
四、测试脚手架工具

npm i guhaiye-cli -g 先全局安装下脚手架
guhaiye-cli -v  查看下脚手架版本,有值则说明安装成功
guhaiye-cli init vue my-vue-project  用脚手架初始化下项目
举报

相关推荐

0 条评论