一直想建一个自己公司自用的脚手架,可以方便的快速开发。于是开始看vue-cli的源码和一些网上的教程。发现,一款脚手架其实很简单,主要原理就是从远程下载一个模板来新建一个项目。同时提供了一系列的交互来动态的更改模板。
下面先将建立一款脚手架可能用到插件及其使用方法列出:
用来编写指令和处理命令行
安装commander:
npm install commander --save
主要api解析
作用:定义版本号
用法:.version('0.0.1', '-v --version')
参数解析:
作用:定义命令选项
用法:.option('-n --name<path>', 'name description', 'default name')
参数解析:
例子:
program
.version('0.1.0', '-v, --version')
.option('-i, --init', 'init something')
.option('-g, --generate', 'generate something')
.option('-r, --remove', 'remove something');
作用:添加命令名称
用法:.command('rmdir <dir> [otherDirs...]', 'install description', opts)
参数解析:
作用:定义命令的描述
用法:.description('rmdir desc')
作用:定义命令的回调函数
用法:.action(fn)
作用:解析process.argv,设置options以及触发commands
用法:.parse(process.argv)
(7)on
作用:自定义监听事件
用法:.on('name', fn)
例子:
// 必须在.parse()之前,因为node的emit()是即时的
program.on('--help', function(){
console.log(' Examples:');
console.log('');
console.log(' this is an example');
console.log('');
});
program.on('option:verbose', function(){
process.env.VERBOSE = this.verbose;
})
//error on unkown commands
program.on('command:*', function(){
console.error('Invalid command: %s\nSee --help for a list of available commands.', program.args.join(' '))
process.exit(1);
})
// 引入依赖
var program = require('commander');
// 定义版本和参数选项
program
.version('0.1.0', '-v, --version')
.option('-i, --init', 'init something')
.option('-g, --generate', 'generate something')
.option('-r, --remove', 'remove something');
// 必须在.parse()之前,因为node的emit()是即时的
program.on('--help', function(){
console.log(' Examples:');
console.log('');
console.log(' this is an example');
console.log('');
});
program.parse(process.argv);
if(program.init) {
console.log('init something')
}
if(program.generate) {
console.log('generate something')
}
if(program.remove) {
console.log('remove something')
}
var program = require('commander')
program
.version('0.1.1')
.command('rmdir <dir> [otherDirs...]')
.action(function(dir, otherDirs){
console.log('rmdir %s', dir)
if(otherDirs){
otherDirs.forEach(function(oDir){
console.log('rmdir %s', oDir)
})
}
})
program.parse(process.argv)
执行 node index.js rmdir ./test aaa
用来进行交互式命令行
安装:npm install inquirer --save
语法结构:
const inquirer = require('inquirer');
const promptList = [
// 具体交互内容
];
inquirer.prompt(promptList).then(answers => {
console.log(answers); // 返回的结果
})
基本api
type:表示提问的类型,包括:input, confirm, list, rawlist, expand, checkbox, password, editor;
name: 存储当前问题回答的变量;
message:问题的描述;
default:默认值;
choices:列表选项,在某些type下可用,并且包含一个分隔符(separator);
validate:对用户的回答进行校验;
filter:对用户的回答进行过滤处理,返回处理后的值;
transformer:对用户回答的显示效果进行处理(如:修改回答的字体或背景颜色),但不会影响最终的答案的内容;
when:根据前面问题的回答,判断当前问题是否需要被回答;
pageSize:修改某些type类型下的渲染行数;
prefix:修改message默认前缀;
suffix:修改message默认后缀。
使用示例
var inquirer = require('inquirer');
const promptList = [{
type: 'input',
message: '设置一个用户名',
name: 'name',
default: 'test_user'
},{
type: 'input',
message: '请输入手机号',
name: 'phone',
/*validate: function(val){
if(val.match(/\d{11}/g)){
//return val
}
return "请输入11位数字"
}*/
},{
type: 'confirm',
message: '是否启用监听',
name: 'watch',
prefix: '前缀',
suffix: '后缀',
when: function(answers){
//当watch为true时,开始提问
return answers.watch
}
},{
type: 'list',
message: '请选择一种水果',
name: 'fruit',
choices:[
"Apple",
"Pear",
"Banana"
],
filter: function(val){
//将回答变为小写
return val.toLowerCase()
}
}]
inquirer.prompt(promptList).then(answers => {
// 回调函数,answers 就是用户输入的内容,是个对象
console.log(answers)
})
设置控制台输出内容的样式
使用示例
const chalk = require('chalk')
//控制颜色
console.log(chalk.green('success'))
console.log(chalk.blue.bgRed.bold('Hello world'))
console.log(chalk.underline.bgBlue('lala'))
提供一个加载中效果
使用示例
const ora = require('ora')
//出现加载效果
let spinner = ora('downloading template')
spinner.start()
//加载失败效果
spinner.fail()
//结束加载效果
spinner.succeed()
下载远程模板:支持github、gitlab等
使用语法:
const download = require('download-git-repo')
download(repository, destination, options, callback)
repository为远程仓库地址,destination为下载的文件路径,默认当前目录,options时一些选项,比如clone:boolean表示用http下载还是git clone的形式下载
像我们熟悉的 vue-cli,react-native-cli 等脚手架,只需要输入简单的命令 vue init webpack project,即可快速帮我们生成一个初始项目。在实际工作中,我们可以定制一个属于自己的脚手架,来提高自己的工作效率。
安装生成器npm install express-generator -g,创建名称为APP的应用,在浏览器中使用 localhost:3000访问。注:该模板默认用的是 .jade 文件作为模板渲染 若要使用 ejs 可按照一下方法配置
本文通过一个简单的例子来告诉大家如何使用 Yeoman 快速创建脚手架。要了解更多 yeoman-generator 的开发与使用,可以参考社区里大家写的各类 generator。目前在 npm 上有超过 8000 个 yeoman-generator,也许就会有你的菜。
在前端工程化过程中,为了解决多项目中,相似度高的工作,便诞生许多前端脚手架,这里记录下自己实现一个简易前端脚手架过程的实践。主要是解决多个页面相似内容的复制粘贴问题
vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架,通过脚手架,我们可以快速初始化一个项目,无需自己从零开始一步步配置,有效提升开发体验。尽管这些脚手架非常优秀,但是未必是符合我们的实际应用的
commander在Vue-cli、creat-app(react)中都起到了很大的作用,这种创建脚手架的方式与vue-cli的方式不同,vue-cli则是使用git远程拉取项目再完成初始化,这样一来要比这种更加的方便灵活,每次模板变更不需要再次上传包
NodeJs的出现,让前端工程化的理念不断深入,正在向正规军靠近。先是带来了Gulp、Webpack等强大的构建工具,随后又出现了vue-cli和create-react-app等完善的脚手架,提供了完整的项目架构
脚手架在前端工作流中负责项目起始阶段创建初始文件。与其他功能模块不同的是,脚手架是一个完全“启下”的模块,它没有任何前置依赖。创建完成项目初始文件之后,脚手架就再无用武之地了。
前端开发都少不了对后台的调用,后台地址配置在哪里,是一个很纠结的问题 为此大家开动脑筋,想了不少办法:
构建库的常见方法有两种:一种是自己手动构建webpack库打包,设置output为 library; 另一种是基于vue-cli3输出库资源包。我们采用第二种vue脚手架的方式构建库。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!