从零搭建前端开发环境（零）——终极篇：5.构建自己的前端脚手架

我们在什么情况下会进行项目初始化呢？除了新启动一个项目，还有一个场景，就是我们要学习新东西的时候，想要运行在一个无限接近现实的开发环境，而且还要可以自由配置一些东西（我在吐槽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('')

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，反正足够我研究一阵子了。