教你从零开始搭建一款前端脚手架工具
本文系原创,转载请附带作者信息:Jrain Lau
项目地址:https://github.com/jrainlau/s...
前言
作为一个不折腾会死星人,在熟悉了使用方法以后就开始琢磨起它们的原理来了。经过仔细研究文档和源码,终于算是摸清了其核心的原理,并且依据这个原理自己搭建了一款叫做SCION的脚手架。
现在让我们就以SCION为例,从零开始搭建一款属于我们自己的脚手架工具吧!
核心原理
vue-cli
提供了相当丰富的选项和设定功能,但是其本质也是从远程仓库把不同的模版
拉取到本地,而并非是什么“本地生成”的黑科技。
技术选型
node.js:整个脚手架工具的根本组成部分,推荐使用最新的版本。
es6:新版本的
node.js
对于es6
的支持度已经非常高,使用es6
能够极大地提升开发效率和开发感受。commander:TJ大神开发的工具,能够更好地组织和处理命令行的输入。
co:TJ大神开发的异步流程控制工具,用更舒服的方式写异步代码。
co-prompt:还是TJ大神的作品……传统的命令行只能单行一次性地输入所有参数和选项,使用这个工具可以自动提供提示信息,并且分步接收用户的输入,体验类似
npm init
时的一步一步输入参数的过程。
整体架构
国际惯例,着手开发之前得先弄明白整体架构,看图:
首先明白模版
的概念。一个模版就是一个项目的样板,包含项目的完整结构和信息。
模版的信息都存放在一个叫做templates.json
的文件当中。
用户可以通过命令行对templates.json
进行添加、删除、罗列的操作。
通过选择不同的模版,SCION会自动从远程仓库把相应的模板拉取到本地,完成项目的搭建。
最终整个脚手架的文件结构如下:
=================|__ bin|__ scion|__ command|__ add.js|__ delete.js|__ init.js|__ list.js|__ node_modules|__ package.json|__ templates.json
入口文件
首先建立项目,在package.json
里面写入依赖并执行npm install
:
"dependencies": {"chalk": "^1.1.3","co": "^4.6.0","co-prompt": "^1.0.0","commander": "^2.9.0"}
在根目录下建立\bin
文件夹,在里面建立一个无后缀名的scion
文件。这个bin\scion
文件是整个脚手架的入口文件,所以我们首先对它进行编写。
首先是一些初始化的代码:
#!/usr/bin/env node --harmony
'use strict'// 定义脚手架的文件路径
process.env.NODE_PATH = __dirname + '/../node_modules/'const program = require('commander')// 定义当前版本
program.version(require('../package').version )// 定义使用方法
program.usage('<command>')
从前文的架构图中可以知道,脚手架支持用户输入4种不同的命令。现在我们来写处理这4种命令的方法:
program.command('add').description('Add a new template').alias('a').action(() => {require('../command/add')()})program.command('list').description('List all the templates').alias('l').action(() => {require('../command/list')()})program.command('init').description('Generate a new project').alias('i').action(() => {require('../command/init')()})program.command('delete').description('Delete a template').alias('d').action(() => {require('../command/delete')()})
commander
的具体使用方法在这里就不展开了,可以直接到官网去看详细的文档。
最后别忘了处理参数和提供帮助信息:
program.parse(process.argv)if(!program.args.length){program.help()
}
完整的代码请看这里。
使用node
运行这个文件,看到输出如下,证明入口文件已经编写完成了。
Usage: scion <command>Commands:add|a Add a new templatelist|l List all the templatesinit|i Generate a new projectdelete|d Delete a templateOptions:-h, --help output usage information-V, --version output the version number
处理用户输入
在项目根目录下建立\command
文件夹,专门用来存放命令处理文件。
在根目录下建立templates.json
文件并写入如下内容,用来存放模版信息:
{"tpl":{}}
添加模板
进入\command
并新建add.js
文件:
'use strict'
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
const fs = require('fs')module.exports = () => {co(function *() {// 分步接收用户输入的参数let tplName = yield prompt('Template name: ')let gitUrl = yield prompt('Git https link: ')let branch = yield prompt('Branch: ')// 避免重复添加if (!config.tpl[tplName]) {config.tpl[tplName] = {}config.tpl[tplName]['url'] = gitUrl.replace(/[\u0000-\u0019]/g, '') // 过滤unicode字符config.tpl[tplName]['branch'] = branch} else {console.log(chalk.red('Template has already existed!'))process.exit()}// 把模板信息写入templates.jsonfs.writeFile(__dirname + '/../templates.json', JSON.stringify(config), 'utf-8', (err) => {if (err) console.log(err)console.log(chalk.green('New template added!\n'))console.log(chalk.grey('The last template list is: \n'))console.log(config)console.log('\n')process.exit()})})
}
删除模板
同样的,在\command
文件夹下建立delete.js
文件:
'use strict'
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
const fs = require('fs')module.exports = () => {co(function *() {// 接收用户输入的参数let tplName = yield prompt('Template name: ')// 删除对应的模板if (config.tpl[tplName]) {config.tpl[tplName] = undefined} else {console.log(chalk.red('Template does not exist!'))process.exit()}// 写入template.jsonfs.writeFile(__dirname + '/../templates.json', JSON.stringify(config), 'utf-8', (err) => {if (err) console.log(err)console.log(chalk.green('Template deleted!'))console.log(chalk.grey('The last template list is: \n'))console.log(config)console.log('\n')process.exit()})})
}
罗列模板
建立list.js
文件:
'use strict'
const config = require('../templates')module.exports = () => {console.log(config.tpl)process.exit()
}
构建项目
现在来到我们最重要的部分——构建项目。同样的,在\command
目录下新建一个叫做init.js
的文件:
'use strict'
const exec = require('child_process').exec
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')module.exports = () => {co(function *() {// 处理用户输入let tplName = yield prompt('Template name: ')let projectName = yield prompt('Project name: ')let gitUrllet branchif (!config.tpl[tplName]) {console.log(chalk.red('\n × Template does not exit!'))process.exit()}gitUrl = config.tpl[tplName].urlbranch = config.tpl[tplName].branch// git命令,远程拉取项目并自定义项目名let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`console.log(chalk.white('\n Start generating...'))exec(cmdStr, (error, stdout, stderr) => {if (error) {console.log(error)process.exit()}console.log(chalk.green('\n √ Generation completed!'))console.log(`\n cd ${projectName} && npm install \n`)process.exit()})})
}
可以看到,这一部分代码也非常简单,关键的一句话是
let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`
它的作用正是从远程仓库克隆到自定义目录,并切换到对应的分支。熟悉git命令的同学应该明白,不熟悉的同学是时候补补课啦!
全局使用
为了可以全局使用,我们需要在package.json
里面设置一下:
"bin": {"scion": "bin/scion"},
本地调试的时候,在根目录下执行
npm link
即可把scion
命令绑定到全局,以后就可以直接以scion
作为命令开头而无需敲入长长的node scion
之类的命令了。
现在我们的脚手架工具已经搭建好了,一起来尝试一下吧!
使用测试
add | a 添加模版命令
init | i 生成项目命令
delete | d 删除模版命令 和 list | l 罗列模版命令
大功告成啦!现在我们的整个脚手架工具已经搭建完成了,以后只需要知道模板的git https地址和branch就可以不断地往SCION上面添加,团队协作的话只需要分享SCION的templates.json
文件就可以了。
后记
看起来并不复杂的东西,实际从零开始搭建也是颇费了一番心思。最大的难题是在开始的时候并不懂得如何像npm init
那样可以一步一步地处理用户输入,只懂得一条命令行把所有的参数都带上,这样的用户体验真的很不好。研究了vue-cli
和yoeman
也没有找到相应的代码,只好不断地google,最后总算找到了一篇文章,可以用co
和co-prompt
这两个工具实现,再一次膜拜无所不能的TJ大神,也希望能够有小伙伴告诉我vue-cli
它们是怎么实现的。
这个脚手架只具备最基本的功能,还远远没有达到市面上同类产品的高度,在日后再慢慢填补吧,不管怎么说,完成SCION的过程中真的学习到了很多东西。
感谢你的阅读。我是Jrain,欢迎关注我的专栏,将不定期分享自己的学习体验,开发心得,搬运墙外的干货。下次见啦!
教你从零开始搭建一款前端脚手架工具相关推荐
- 从零搭建前端脚手架工具
所谓脚手架其实就是帮助我们快速搭建项目的工具,通常只需要跑一个命令就可以帮助我们生成一个项目,让用户不需要再思考项目的目录结构,单元测试,所需要的依赖等繁琐的事情 前言 在实际的开发过程中,从零开始建 ...
- 纯萌新手把手教你从零开始搭建自己的博客
纯萌新手把手教你从零开始搭建自己的博客 欢迎来我的博客看看 方法一:Gridea(推荐) 如果你是真的是像我一样的纯萌新,不是那种谦虚的大佬,那么不用想了,Gridea是你最好的选择. 不如先看看原作 ...
- css画横线箭头_2020年你应该关注这50款前端热门工具:CSS HTML 工具篇
大家好,在一篇文章里 2020年让人难以置信的50款前端新工具:JavaScript插件篇(一),我分享了 11 款 JS 插件,本篇文章我将会和大家分享七款 CSS.HTML 相关的新工具. 12. ...
- 19年你应该关注这50款前端热门工具(下)
上两篇文章<19年你应该关注这50款前端热门工具(上)>.<19年你应该关注这50款前端热门工具(中)>文章小编介绍了构建.框架和库.CSS和HTML.JavaScript相关 ...
- 【奥斯卡理财星体系 第五章】丨手把手教你从零开始搭建资产配置
学习理财良久,依然没有头绪? 有没有简洁明了,循序渐进的课程,能够让我少走弯路,早日变为理财达人呢? 从一个完全的理财小白一路取经的奥斯卡,将手把手教你从零开始建立理财体系! [奥斯卡理财星体系 第五 ...
- 新手教程--手把手教你从零开始制作一款电商必备的商城小程序
近年来,在电商.新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验.如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌开发和营销成本,实现精准营销,提升品牌知名 ...
- 使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中,我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目,该项目将包含三个不同的子应用.我们将使用Webpack包管理工具和yarn来管理依赖关系,并使用Single- ...
- 这50款前端热门工具简直不要太好用了!
来源 | IT智云编程 19年,又是新的一年,"前端届",又出了哪些新的"玩意",今天向你推荐目前比较热门新鲜度靠前的50款前端工具,希望在新的一年里,对你有所 ...
- 174款前端开发工具汇总,学习,开发,事半功倍!
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
最新文章
- c++重载(以运算符重载为主)
- playsound函数Linux使用,函数PlaySound和sndPlaySound的用法
- log4j配置不生效
- Python中用numpy进行图片处理
- Linux命令find查询suid和sgid
- java服务器客户端文件,客户端服务器文件传输Java
- 计算机c语言模拟考试,国家计算机二级c语言考试模拟题
- PostgreSQL定时自动备份
- navicat 将自增长字段重置(重新从1开始)的方法
- java arraylist length,在Java中调整ArrayList的大小时,无法理解溢出的可能性
- M1芯片Mac mini 2K显示器开启HiDpi
- Windows 右键菜单修复
- Linux - history命令详解
- jquery 抓取微博_使用jQuery和RegexJavaScript进行客户端网络抓取
- 单个正态总体方差的置信区间
- 服务器没有显示器能接笔记本吗,笔记本能连显示器吗_笔记本能不能接显示器...
- 滴水逆向三期和中级和高期教程
- 网页瘦身方法-金瑞帆高端建站
- CSDN文章如何迁移至微信公众号
- 关于抽象类和抽象方法
热门文章
- Swift - 重写导航栏返回按钮
- K-means算法和矢量量化
- 如何实现滑动scrollview上下隐藏
- java base64解码出错_Java Base64解码错误及解决方法
- STM32F103五分钟入门系列(二)GPIO的七大寄存器+GPIOx_LCKR作用和配置
- Java基础 —— 变量,选择,循环,数组,输入与输出等
- 全国计算机等级考试题库二级C操作题100套(第85套)
- python绘制三维地形_【学习笔记】Python科学计算三维可视化(黄天羽、嵩天)(学习中。。)|python基础教程|python入门|python教程...
- php 缩略图 等比例 不失真,PHP自适应宽高度等比例缩略图函数 (无裁切)
- 后端:死磕18个Java8日期处理,工作必用!