我们在什么情况下会进行项目初始化呢?除了新启动一个项目,还有一个场景,就是我们要学习新东西的时候,想要运行在一个无限接近现实的开发环境,而且还要可以自由配置一些东西(我在吐槽create-react-app)。比如,想学react + mobx,webapck、babel、各种loader、eslint、路由、单测都需要先安装好。这时候,如果有脚手架,一条命令搞定。
脚手架,听起来很高大上的一个东西。不要怕,其实入门非常简单。其原理就是准备好一个(或几个)最佳实践的目录结构项目,然后用脚手架拉取就可以了。包教包会,让我们开始吧!
参考文献:
跟着老司机玩转Node命令行1、建立模版源
说白了,就是把咱们之前一直再做的demo项目,推到一个远程的谁都能访问的地方,比如github。至于如何建立,这里就不做说明了,如果暂时不能完成这步,那么用笔者的项目地址(https://github.com/zhaolandelong/base-tpl.git)来练习也可以。
2、构建项目及安装依赖
$ mkdir my-cli && cd my-cli && npm init -y && npm i -S chalk co co-prompt commander
新建 bin/cli 文件
#!/usr/bin/env node --harmony
'use strict'
// 定义脚手架的文件路径
process.env.NODE_PATH = __dirname + '/../node_modules/'
const program = require('commander')
// 定义当前版本
program
.version(require('../package').version )
// 定义使用方法
program
.usage('<command>')
program
.command('init')
.description('Generate a new project')
.action(() => {
require('../command/init')()
})
program.parse(process.argv)
if(!program.args.length){
program.help()
}
新建 command/init.js 文件
'use strict'
const exec = require('child_process').exec
const co = require('co')
const prompt = require('co-prompt')
const config = require('../templates')
const chalk = require('chalk')
module.exports = () => {
co(function *() {
// 处理用户输入
let tplName = 'base'
let projectName = yield prompt('Project name: ')
let gitUrl
let branch
if (!config.tpl[tplName]) {
console.log(chalk.red('\n × Template does not exit!'))
process.exit()
}
gitUrl = config.tpl[tplName].url
branch = config.tpl[tplName].branch
// git命令,远程拉取项目并自定义项目名
let cmdStr = `git clone ${gitUrl} ${projectName} && cd ${projectName} && git checkout ${branch}`
console.log(chalk.white('\n Start generating...'))
exec(cmdStr, (error, stdout, stderr) => {
if (error) {
console.log(error)
process.exit()
}
console.log(chalk.green('\n √ Generation completed!'))
console.log(`\n cd ${projectName} && npm install \n`)
process.exit()
})
})
}
新建templates.json文件
{
"tpl": {
"base": {
"url": "https://github.com/zhaolandelong/base-tpl.git", // 此处可替换为自己的项目地址
"branch": "master"
}
}
}
3、全局使用
在package.json里加入
"bin": {
"my-cli": "bin/cli"
},
运行绑定全局命令
$ npm link
切换到一个想要创建项目的目录,运行
$ my-cli init
输入你想给项目起的名字,比如my-project。可以看到,我们之前写的demo项目已经成功的被copy下来,就这么简单!完成!
本文只是介绍了如何简单的无脑构建一个脚手架,要是想做更灵活的配置,还需要研究commander文档。另外,借鉴一些最佳实践也是很必要的,比如vue-cli,反正足够我研究一阵子了。