用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 文件的内容移除不需要的模板文件,然后再渲染真正会用到的项目模板,最终生成项目。









