详解基于node.js的脚手架工具开发经历

2020-06-17 06:38:37易采站长站整理

用ora优化加载等待的交互

ora可以用在加载等待的场景中,比如脚手架中下载项目模板的时候可以使用,如果给模板插值生成项目的过程也有明显等待的话,也可以使用。

以下载为例,对

download.js
做一些改良:


npm i ora -D


const download = require('download-git-repo')
const ora = require('ora')

module.exports = function (target) {
target = path.join(target || '.', '.download-temp')
return new Promise(resolve, reject) {
const url = 'https://github.com:username/templates-repo.git#master'
const spinner = ora(`正在下载项目模板,源地址:${url}`)
spinner.start()
download(url, target, { clone: true }, (err) => {
if (err) {
spinner.fail() // wrong :(
reject(err)
} else {
spinner.succeed() // ok :)
resolve(target)
}
})
}
}

用chalk优化终端信息的显示效果

chalk可以给终端文字设置颜色。


// ...
const chalk = require('chalk')
const logSymbols = require('log-symbols')

// ...

function go () {
// ...
next.then(/* ... */)
/* ... */
.then(context => {
// 成功用绿色显示,给出积极的反馈
console.log(logSymbols.success, chalk.green('创建成功:)'))
console.log()
console.log(chalk.green('cd ' + context.root + 'nnpm installnnpm run dev'))
}).catch(err => {
// 失败了用红色,增强提示
console.error(logSymbols.error, chalk.red(`创建失败:${error.message}`))
})
}

根据输入项移除模板中不需要的文件

有时候,项目模板中并不是所有文件都是需要的。为了保证新生成的项目中尽可能的不存在脏代码,我们可能需要根据脚手架的输入项来确认最终生成的项目结构,将没用的文件或者目录移除。比如vue-cli,创建项目时会询问我们是否需要加入测试模块,如果不需要,最终生成的项目代码中是不包含测试相关的代码的。这个功能如何实现呢?

实现的思路

我参考了git的思路,定义个

ignore
文件,将需要被忽略的文件名列在这个
ignore
文件里,配上模板语法。脚手架在生成项目的时候,根据输入项先渲染这个
ignore
文件,然后根据
ignore
文件的内容移除不需要的模板文件,然后再渲染真正会用到的项目模板,最终生成项目。