詳解基于node.js的腳手架工具開發(fā)經(jīng)歷

/bin # ------ 命令執(zhí)行文件
/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> [項(xiàng)目名稱]')
	.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> [項(xiàng)目名稱]')
	.command('init', '創(chuàng)建新項(xiàng)目')
	.parse(process.argv)

touch ./bin/macaw-init.js

#!/usr/bin/env node

const program = require('commander')

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

// 根據(jù)輸入，獲取項(xiàng)目名稱
let projectName = program.args[0]

if (!projectName) { // project-name 必填
 // 相當(dāng)于執(zhí)行命令的--help選項(xiàng)，顯示help信息，這是commander內(nèi)置的一個(gè)命令選項(xiàng)
 program.help() 
 return
}

go()

function go () {
	// 預(yù)留，處理子命令 
}

#!/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>')

// 根據(jù)輸入，獲取項(xiàng)目名稱
let projectName = program.args[0]

if (!projectName) { // project-name 必填
 // 相當(dāng)于執(zhí)行命令的--help選項(xiàng)，顯示help信息，這是commander內(nèi)置的一個(gè)命令選項(xiàng)
 program.help() 
 return
}

const list = glob.sync('*') // 遍歷當(dāng)前目錄
let rootName = path.basename(process.cwd())
if (list.length) { // 如果當(dāng)前目錄不為空
 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(`項(xiàng)目${projectName}已經(jīng)存在`)
 return
 }
 rootName = projectName
} else if (rootName === projectName) {
 rootName = '.'
} else {
 rootName = projectName
}

go()

function go () {
	// 預(yù)留，處理子命令 
 	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) {
 // 這里可以根據(jù)具體的模板地址設(shè)置下載的url，注意，如果是git，url后面的branch不能忽略
 download('https://github.com:username/templates-repo.git#master',
 target, { clone: true }, (err) => {
 if (err) {
 reject(err)
 } else {
 // 下載的模板存放在一個(gè)臨時(shí)路徑中，下載完成后，可以向下通知這個(gè)臨時(shí)路徑，以便后續(xù)處理
 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: '請(qǐng)輸入項(xiàng)目名稱'
 }
]).then(answers => {
 console.log(`你輸入的項(xiàng)目名稱是：${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(`項(xiàng)目${projectName}已經(jīng)存在`)
 return
 }
 next = Promise.resolve(projectName)
} else if (rootName === projectName) {
 next = inquirer.prompt([
 {
 name: 'buildInCurrent',
 message: '當(dāng)前目錄為空，且目錄名稱和項(xiàng)目名稱相同，是否直接在當(dāng)前目錄下創(chuàng)建新項(xiàng)目？'
 type: 'confirm',
 default: true
 }
 ]).then(answer => {
 return Promise.resolve(answer.buildInCurrent ? '.' : projectName)
 })
} else {
 next = Promise.resolve(projectName)
}

next && go()

function go () {
 next.then(projectRoot => {
 if (projectRoot !== '.') {
 fs.mkdirSync(projectRoot)
 }
 return download(projectRoot).then(target => {
 return {
 projectRoot,
 downloadTemp: target
 }
 })
 })
}

// ...

// 這個(gè)模塊可以獲取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: '項(xiàng)目的名稱',
 default: context.name
 }, {
 name: 'projectVersion',
 message: '項(xiàng)目的版本號(hào)',
 default: '1.0.0'
 }, {
 name: 'projectDescription',
 message: '項(xiàng)目的簡介',
 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)
 })
}

{
 "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"
 },
 ...
}

// 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 ? reject(err) : resolve()
 })
 })
}

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

function go () {
 next.then(projectRoot => {
 // ...
 }).then(context => {
 // 添加生成的邏輯
 return generator(context)
 }).then(context => {
 console.log('創(chuàng)建成功:)')
 }).catch(err => {
 console.error(`創(chuàng)建失?。?{err.message}`)
 }) 
}

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(`正在下載項(xiàng)目模板，源地址：${url}`)
 spinner.start()
 download(url, target, { clone: true }, (err) => {
 if (err) {
 spinner.fail() // wrong :(
 reject(err)
 } else {
 spinner.succeed() // ok :)
 resolve(target)
 }
 })
 }
}

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

// ...

function go () {
 // ...
 next.then(/* ... */)
 /* ... */
 	.then(context => {
 // 成功用綠色顯示，給出積極的反饋
 console.log(logSymbols.success, chalk.green('創(chuàng)建成功:)'))
 console.log()
 console.log(chalk.green('cd ' + context.root + '\nnpm install\nnpm run dev'))
 }).catch(err => {
 // 失敗了用紅色，增強(qiáng)提示
 console.error(logSymbols.error, chalk.red(`創(chuàng)建失?。?{error.message}`))
 }) 
}

{{#unless supportMacawAdmin}}
# 如果不開啟admin后臺(tái)，登錄頁面和密碼修改頁面是不需要的
src/entry/login.js 	
src/entry/password.js
{{/unless}}

# 最終生成的項(xiàng)目中不需要ignore文字自身
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)
	// 判斷下載的項(xiàng)目模板中是否有templates.ignore
 const ignoreFile = path.join(src, 'templates.ignore')
 if (fs.existsSync(ignoreFile)) {
 // 定義一個(gè)用于移除模板中被忽略文件的metalsmith插件
 metalsmith.use((files, metalsmith, done) => {
 const meta = metalsmith.metadata()
 // 先對(duì)ignore文件進(jìn)行渲染，然后按行切割ignore文件的內(nèi)容，拿到被忽略清單
 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 ? reject(err) : resolve()
 })
 })
}