在工作中我们会用到很多便捷的脚手架工具，比如Vue的vue-cli，React的create-react-app等。极大的提高了我们的工作效率，那么今天我们就来学学怎么制作一款自用的前端脚手架。
核心依赖
- commander 命令行工具
- download-git-repo git仓库代码下载
- chalk 命令行输出样式美化
- Inquirer.js 命令行交互
- ora 命令行加载中效果
- didyoumean 脚本命令匹配
- fs-extra fs的替代品。
- log-symbols 日志着色
- semver 语义化日志控制
- validate-npm-package-name 校验包名
项目结构
项目搭建
- 在一个空文件下执行npm init
- 将以上依赖全部安装，执行npm install commander ... validate-npm-package-name -S
1. 初始化
在根目录下新建
bin/luchx.js文件，并添加以下代码
#!/usr/bin/env node
// Check node version before requiring/doing anything else
// The user may be on a very old node version
const chalk = require('chalk')
const program = require('commander')
program
.version(require('../package').version)
.usage('<command> [options]')
program.parse(process.argv)
if (!process.argv.slice(2).length) {
program.outputHelp()
}
首先文件第一行表示该文件运行于node环境，接着引入commander。最后的program.parse方法用于解析命令行中传入的参数。
2. 添加第一个指令
command命令有两种用法，官方示例如下：
// Command implemented using action handler (description is supplied separately to `.command`)
// Returns new command for configuring.
program
.command('clone <source> [destination]')
.description('clone a repository into a newly created directory')
.action((source, destination) => {
console.log('clone command called');
});
// Command implemented using separate executable file (description is second parameter to `.command`)
// Returns top-level command for adding more commands.
program
.command('start <service>', 'start named service')
.command('stop [service]', 'stop named service, or all if no name supplied');
其中参数对应的<>, [ ]分别代表必填和选填。这里我们使用第一种，添加如下代码：
program
.command('create <app-name>')
.description(' Create a project with template already created.')
.action((name, cmd) => {
require('../lib/create')(name)
})
3. 添加监听--help事件
// add some useful info on help
program.on('--help', () => {
console.log()
console.log(` Run ${chalk.cyan('luchx <command> --help')} for detailed usage of given command.`)
console.log()
})
执行结果
交互说明
1. 在根目录下创建lib文件，并添加create.js文件。
module.exports = async function create (projectName) { }
2. 校验包名
const path = require('path')
const fs = require('fs-extra')
const inquirer = require('inquirer')
const chalk = require('chalk')
const validateProjectName = require('validate-npm-package-name')
module.exports = async function create (projectName) {
const cwd = process.cwd()
const targetDir = path.resolve(cwd, projectName)
const name = path.relative(cwd, projectName)
const result = validateProjectName(name)
if (!result.validForNewPackages) {
console.error(chalk.red(`Invalid project name: "${name}"`))
result.errors && result.errors.forEach(err => {
console.error(chalk.red.dim('Error: ' + err))
})
result.warnings && result.warnings.forEach(warn => {
console.error(chalk.red.dim('Warning: ' + warn))
})
process.exit(1)
}
if (fs.existsSync(targetDir)) {
const { action } = await inquirer.prompt([
{
name: 'action',
type: 'list',
message: `Target directory ${chalk.cyan(targetDir)} already exists. Pick an action:`,
choices: [
{ name: 'Overwrite', value: 'overwrite' },
{ name: 'Cancel', value: false }
]
}
])
if (!action) {
return
} else if (action === 'overwrite') {
console.log(`\nRemoving ${chalk.cyan(targetDir)}...`)
await fs.remove(targetDir)
}
}
// ...
}
3. inquirer.js 处理命令交互
const inquirer = require('inquirer')
module.exports = async function create (projectName) {
// ...
const { bolierplateType, author, description, version } = await inquirer.prompt([
{
name: 'bolierplateType',
type: 'list',
default: 'vue',
choices: [
{
name: 'Vue',
value: 'vue'
},
{
name: 'React',
value: 'react'
}
],
message: 'Select the boilerplate type.'
}, {
type: 'input',
name: 'description',
message: 'Please input your project description.',
default: 'description',
validate (val) {
return true
},
transformer (val) {
return val
}
}, {
type: 'input',
name: 'author',
message: 'Please input your author name.',
default: 'author',
validate (val) {
return true
},
transformer (val) {
return val
}
}, {
type: 'input',
name: 'version',
message: 'Please input your version.',
default: '0.0.1',
validate (val) {
return true
},
transformer (val) {
return val
}
}
])
// ...
}
4. 封装下载文件lib/downloadFromRemote.js
const download = require('download-git-repo')
module.exports = function downloadFromRemote (url, name) {
return new Promise((resolve, reject) => {
download(`direct:${url}`, name, { clone: true }, function (err) {
if (err) {
reject(err)
return
}
resolve()
})
})
}
5. 添加下载操作
const fs = require('fs-extra')
const chalk = require('chalk')
const logSymbols = require('log-symbols')
const downloadFromRemote = require('../lib/downloadFromRemote')
module.exports = async function create (projectName) {
// ...
downloadFromRemote(remoteUrl, projectName).then(res => {
fs.readFile(`./${projectName}/package.json`, 'utf8', function (err, data) {
if (err) {
spinner.stop()
console.error(err)
return
}
const packageJson = JSON.parse(data)
packageJson.name = projectName
packageJson.description = description
packageJson.author = author
packageJson.version = version
var updatePackageJson = JSON.stringify(packageJson, null, 2)
fs.writeFile(`./${projectName}/package.json`, updatePackageJson, 'utf8', function (err) {
spinner.stop()
if (err) {
console.error(err)
} else {
console.log(logSymbols.success, chalk.green(`Successfully created project template of ${bolierplateType}\n`))
console.log(`${chalk.grey(`cd ${projectName}`)}\n${chalk.grey('yarn install')}\n${chalk.grey('yarn serve')}\n`)
}
process.exit()
})
})
}).catch((err) => {
console.log(logSymbols.error, err)
spinner.fail(chalk.red('Sorry, it must be something error,please check it out. \n'))
process.exit(-1)
})
}
运行
本项目没有发布到npm上，仅作学习研究之用，可以自己拉取项目然后执行npm link，在本地体验。为了可以全局使用，我们需要在package.json里面设置一下，这样就可以执行luchx命令开头的指令了。
"bin": {
"luchx": "bin/luchx.js"
},
以上完整的代码可以访问github查看获取
参考
- vue-cli Vue.js 开发的标准工具
- commander node.js 命令行接口的完整解决方案
- Inquirer 命令行交互工具
