教你从零开始搭建一款前端脚手架工具

最新推荐文章于 2024-08-01 12:07:46 发布

2401_84092542

最新推荐文章于 2024-08-01 12:07:46 发布

阅读量633

点赞数 30

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84092542/article/details/138119799

版权

程序员专栏收录该内容

282 篇文章 0 订阅

订阅专栏

yoeman搭建项目需要提供yoeman-generator。yoeman-generator本质上就是一个具备完整文件结构的项目样板，用户需要手动地把这些generator下载到本地，然后yoeman就会根据这些generator自动生成各种不同的项目。

vue-cli提供了相当丰富的选项和设定功能，但是其本质也是从远程仓库把不同的模版拉取到本地，而并非是什么“本地生成”的黑科技。

这样看来，思路也就有了——首先建立不同的样板项目，然后脚手架根据用户的指令引用样板项目生成实际项目。样板项目可以内置在脚手架当中，也可以部署在远程仓库。为了更广的适用范围，SCION采用的是第二种方式。

技术选型

====

node.js：整个脚手架工具的根本组成部分，推荐使用最新的版本。
es6：新版本的node.js对于es6的支持度已经非常高，使用es6能够极大地提升开发效率和开发感受。
commander：TJ大神开发的工具，能够更好地组织和处理命令行的输入。
co：TJ大神开发的异步流程控制工具，用更舒服的方式写异步代码。
co-prompt：还是TJ大神的作品……传统的命令行只能单行一次性地输入所有参数和选项，使用这个工具可以自动提供提示信息，并且分步接收用户的输入，体验类似npm init时的一步一步输入参数的过程。

整体架构

====

国际惯例，着手开发之前得先弄明白整体架构，看图：

首先明白模版的概念。一个模版就是一个项目的样板，包含项目的完整结构和信息。

模版的信息都存放在一个叫做templates.json的文件当中。

用户可以通过命令行对templates.json进行添加、删除、罗列的操作。

通过选择不同的模版，SCION会自动从远程仓库把相应的模板拉取到本地，完成项目的搭建。

最终整个脚手架的文件结构如下：

入口文件

====

首先建立项目，在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(‘’)

从前文的架构图中可以知道，脚手架支持用户输入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

Commands:

add|a Add a new template

list|l List all the templates

init|i Generate a new project

delete|d Delete a template

Options:

-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.json fs.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.json fs.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() }) }) }
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。