/bin # ------ 命令执行文件
/lib # ------ 工具模块
package.json

{
 "name": "macaw-cli",
 "version": "1.0.0",
 "description": "我的cli",
 "bin": {
 "macaw": "./bin/macaw.js"
 }
}

touch ./bin/macaw.js

#!/usr/bin/env node

const program = require('commander') // npm i commander -D

program.version('1.0.0')
	.usage('<command> [项目名称]')
	.command('hello', 'hello')
	.parse(process.argv)

touch ./bin/macaw-hello.js
echo "console.log('hello, commander')" > ./bin/macaw-hello.js

node ./bin/macaw.js hello

const program = require('commander')

program.version('1.0.0')
	.usage('<command> [项目名称]')
	.command('init', '创建新项目')
	.parse(process.argv)

touch ./bin/macaw-init.js

#!/usr/bin/env node

const program = require('commander')

program.usage('<project-name>').parse(process.argv)

// 根据输入，获取项目名称
let projectName = program.args[0]

if (!projectName) { // project-name 必填
 // 相当于执行命令的--help选项，显示help信息，这是commander内置的一个命令选项
 program.help() 
 return
}

go()

function go () {
	// 预留，处理子命令 
}

#!/usr/bin/env node

const program = require('commander')
const path = require('path')
const fs = require('fs')
const glob = require('glob') // npm i glob -D

program.usage('<project-name>')

// 根据输入，获取项目名称
let projectName = program.args[0]

if (!projectName) { // project-name 必填
 // 相当于执行命令的--help选项，显示help信息，这是commander内置的一个命令选项
 program.help() 
 return
}

const list = glob.sync('*') // 遍历当前目录
let rootName = path.basename(process.cwd())
if (list.length) { // 如果当前目录不为空
 if (list.filter(name => {
 const fileName = path.resolve(process.cwd(), path.join('.', name))
 const isDir = fs.stat(fileName).isDirectory()
 return name.indexOf(projectName) !== -1 && isDir
 }).length !== 0) {
 console.log(`项目${projectName}已经存在`)
 return
 }
 rootName = projectName
} else if (rootName === projectName) {
 rootName = '.'
} else {
 rootName = projectName
}

go()

function go () {
	// 预留，处理子命令 
 	console.log(path.resolve(process.cwd(), path.join('.', rootName)))
}

node /[pathto]/macaw-cli/bin/macaw.js init hello-cli

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

module.exports = function (target) {
 target = path.join(target || '.', '.download-temp')
 return new Promise(resolve, reject) {
 // 这里可以根据具体的模板地址设置下载的url，注意，如果是git，url后面的branch不能忽略
 download('https://github.com:username/templates-repo.git#master',
 target, { clone: true }, (err) => {
 if (err) {
 reject(err)
 } else {
 // 下载的模板存放在一个临时路径中，下载完成后，可以向下通知这个临时路径，以便后续处理
 resolve(target)
 }
 })
 }
}

const download = require('./lib/download')

... // 之前的省略
function go () {
 download(rootName)
 .then(target => console.log(target))
 .catch(err => console.log(err))
}

const inquirer = require('inquirer') // npm i inquirer -D

inquirer.prompt([
 {
 name: 'projectName',
 message: '请输入项目名称'
 }
]).then(answers => {
 console.log(`你输入的项目名称是：${answers.projectName}`)
})

// ...

const inquirer = require('inquirer')
const list = glob.sync('*')

let next = undefined
if (list.length) {
 if (list.filter(name => {
 const fileName = path.resolve(process.cwd(), path.join('.', name))
 const isDir = fs.stat(fileName).isDirectory()
 return name.indexOf(projectName) !== -1 && isDir
 }).length !== 0) {
 console.log(`项目${projectName}已经存在`)
 return
 }
 next = Promise.resolve(projectName)
} else if (rootName === projectName) {
 next = inquirer.prompt([
 {
 name: 'buildInCurrent',
 message: '当前目录为空，且目录名称和项目名称相同，是否直接在当前目录下创建新项目？'
 type: 'confirm',
 default: true
 }
 ]).then(answer => {
 return Promise.resolve(answer.buildInCurrent "htmlcode">

// ...

// 这个模块可以获取node包的最新版本
const latestVersion = require('latest-version') // npm i latest-version -D

// ...

function go () {
 next.then(projectRoot => {
 if (projectRoot !== '.') {
 fs.mkdirSync(projectRoot)
 }
 return download(projectRoot).then(target => {
 return {
 name: projectRoot,
 root: projectRoot,
 downloadTemp: target
 }
 })
 }).then(context => {
 return inquirer.prompt([
 {
 name: 'projectName',
 	message: '项目的名称',
 default: context.name
 }, {
 name: 'projectVersion',
 message: '项目的版本号',
 default: '1.0.0'
 }, {
 name: 'projectDescription',
 message: '项目的简介',
 default: `A project named ${context.name}`
 }
 ]).then(answers => {
 return latestVersion('macaw-ui').then(version => {
 answers.supportUiVersion = version
 return {
 ...context,
 metadata: {
 ...answers
 }
 }
 }).catch(err => {
 return Promise.reject(err)
 })
 })
 }).then(context => {
 console.log(context)
 }).catch(err => {
 console.error(err)
 })
}


下载完成后，提示用户输入新项目信息。当然，交互的问题不仅限于此，可以根据自己项目的情况，添加更多的交互问题。inquirer.js强大的地方在于，支持很多种交互类型，除了简单的 input ，还有 confirm 、 list 、 password 、 checkbox 等，具体可以参见项目的 README 。
然后，怎么把这些输入的内容插入到模板中呢，这时候又用到另外一个简单但又不简单的工具包——metalsmith。
使用metalsmith处理模板
引用官网的介绍：
An extremely simple, pluggable static site generator.
它就是一个静态网站生成器，可以用在批量处理模板的场景，类似的工具包还有Wintersmith、 Assemble 、Hexo。它最大的一个特点就是 EVERYTHING IS PLUGIN ，所以，metalsmith本质上就是一个胶水框架，通过黏合各种插件来完成生产工作。
给项目模板添加变量占位符
模板引擎我选择handlebars。当然，还可以有其他选择，例如ejs、 jade 、 swig 。
用handlebars的语法对模板做一些调整，例如修改模板中的 package.json


{
 "name": "{{projectName}}",
 "version": "{{projectVersion}}",
 "description": "{{projectDescription}}",
 "author": "Forcs Zhang",
 "private": true,
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js",
 "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
 "test": "npm run unit",
 "lint": "eslint --ext .js,.vue src test/unit/specs"
 },
 "dependencies": {
 "element-ui": "^2.0.7",
 "macaw-ui": "{{supportUiVersion}}",
 "vue": "^2.5.2",
 "vue-router": "^2.3.1"
 },
 ...
}


package.json 的 name 、 version 、 description 字段的内容被替换成了handlebar语法的占位符，模板中其他地方也做类似的替换，完成后重新提交模板的更新。
实现脚手架给模板插值的功能
在 lib 目录下创建 generator.js ，封装metalsmith。
touch ./lib/generator.js


// npm i handlebars metalsmith -D
const Metalsmith = require('metalsmith')
const Handlebars = require('handlebars')
const rm = require('rimraf').sync

module.exports = function (metadata = {}, src, dest = '.') {
 if (!src) {
 return Promise.reject(new Error(`无效的source：${src}`))
 }
 
 return new Promise((resolve, reject) => {
 Metalsmith(process.cwd())
 .metadata(metadata)
 .clean(false)
 .source(src)
 .destination(dest)
 .use((files, metalsmith, done) => {
 	const meta = metalsmith.metadata()
 Object.keys(files).forEach(fileName => {
  const t = files[fileName].contents.toString()
  files[fileName].contents = new Buffer(Handlebars.compile(t)(meta))
 })
 	done()
 }).build(err => {
 	rm(src)
 	err "htmlcode">

// ...
const generator = require('../lib/generator')

function go () {
 next.then(projectRoot => {
 // ...
 }).then(context => {
 // 添加生成的逻辑
 return generator(context)
 }).then(context => {
 console.log('创建成功:)')
 }).catch(err => {
 console.error(`创建失败：${err.message}`)
 }) 
}


至此，一个带交互，可动态给模板插值的脚手架算是基本完成了。
tips：墙裂推荐一下tj的另一个工具包： consolidate.js ，在vue-cli中发现的，感兴趣的话可以去了解一下。
美化我们的脚手架
通过一些工具包，让脚手架更加人性化。这里介绍两个在vue-cli中发现的工具包：
ora - 显示spinner
chalk - 给枯燥的终端界面添加一些色彩
这两个工具包用起来不复杂，用好了会让脚手架看起来更加高大上
用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 install\nnpm run dev'))
 }).catch(err => {
 // 失败了用红色，增强提示
 console.error(logSymbols.error, chalk.red(`创建失败：${error.message}`))
 }) 
}



根据输入项移除模板中不需要的文件
有时候，项目模板中并不是所有文件都是需要的。为了保证新生成的项目中尽可能的不存在脏代码，我们可能需要根据脚手架的输入项来确认最终生成的项目结构，将没用的文件或者目录移除。比如vue-cli，创建项目时会询问我们是否需要加入测试模块，如果不需要，最终生成的项目代码中是不包含测试相关的代码的。这个功能如何实现呢？
实现的思路
我参考了git的思路，定义个 ignore 文件，将需要被忽略的文件名列在这个 ignore 文件里，配上模板语法。脚手架在生成项目的时候，根据输入项先渲染这个 ignore 文件，然后根据 ignore 文件的内容移除不需要的模板文件，然后再渲染真正会用到的项目模板，最终生成项目。

实现方案
根据以上思路，我先定义了属于我们项目自己的 ignore 文件，取名为 templates.ignore 。
然后在这个 ignore 文件中添加需要被忽略的文件名。


{{#unless supportMacawAdmin}}
# 如果不开启admin后台，登录页面和密码修改页面是不需要的
src/entry/login.js 	
src/entry/password.js
{{/unless}}

# 最终生成的项目中不需要ignore文字自身
templates.ignore


然后在 lib/generator.js 中添加对 templates.ignore 的处理逻辑


// ...

const minimatch = require('minimatch') // https://github.com/isaacs/minimatch

module.exports = function (metadata = {}, src, dest = '.') {
 if (!src) {
 return Promise.reject(new Error(`无效的source：${src}`))
 }

 return new Promise((resolve, reject) => {
 const metalsmith = Metalsmith(process.cwd())
 .metadata(metadata)
 .clean(false)
 .source(src)
 .destination(dest)
	// 判断下载的项目模板中是否有templates.ignore
 const ignoreFile = path.join(src, 'templates.ignore')
 if (fs.existsSync(ignoreFile)) {
 // 定义一个用于移除模板中被忽略文件的metalsmith插件
 metalsmith.use((files, metalsmith, done) => {
 const meta = metalsmith.metadata()
 // 先对ignore文件进行渲染，然后按行切割ignore文件的内容，拿到被忽略清单
 const ignores = Handlebars.compile(fs.readFileSync(ignoreFile).toString())(meta)
  .split('\n').filter(item => !!item.length)
 Object.keys(files).forEach(fileName => {
  // 移除被忽略的文件
  ignores.forEach(ignorePattern => {
  if (minimatch(fileName, ignorePattern)) {
  delete files[fileName]
  }
  })
 })
 done()
 })
 }
 metalsmith.use((files, metalsmith, done) => {
 const meta = metalsmith.metadata()
 Object.keys(files).forEach(fileName => {
 const t = files[fileName].contents.toString()
 files[fileName].contents = new Buffer(Handlebars.compile(t)(meta))
 })
 done()
 }).build(err => {
 rm(src)
 err "color: #ff0000">总结

经过对vue-cli的整理，借助了很多node模块，整个脚手架的实现并不复杂。

  
将项目模板与脚手架工具分离，可以更好的维护模板和脚手架工具。
  
通过commander.js处理命令行
  
通过download-git-repo处理下载
  
通过inquirer.js处理终端交互
  
通过metalsmith和模板引擎将交互输入项插入到项目模板中
  
参考了git的ignore的思路，利用自定义的templates.ignore动态化的移除不必要的文件和目录

以上就是我开发脚手架的主要经历，中间还有很多不足的地方，今后再慢慢完善吧。
最后说一下，其实vue-cli能做的事情还有很多，具体的可以看看项目的README和源码。关于脚手架的开发，不一定要完全造个轮子，可以看看另外一个很强大的模块YEOMAN，借助这个模块也可以很快的实现自己的脚手架工具。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。



                                
                                

                                    node.js,脚手架工具,node.js,脚手架 
                                
DDR爱好者之家 Design By 杰米