实现vue-cli（三）：vue-cli问询和拷贝

一、vue-cli的简单实现

1. 新建一个vue-cli-sample的文件夹，该文件夹下打开命令行，输入yarn init生成package.json文件。
2. package.json文件中新增一行"bin": "cli.js"指定cli.js作为入口文件。
3. 新建cli.js文件，第一行写入#!/usr/bin/env node。因为Node cli应用入口文件必须有这样的文件头，如果是linux或者macOS系统还需要通过命令行输入chomd 755 cli.js修改读写权限。
4. 命令行输入yarn add inquirer ejs --dev安装用户问询模块和模板渲染引擎。
5. cli.js文件里写入以下代码。

#!/usr/bin/env node

// 1、先询问用户信息
// 2、指定模板路径和生成路径
// 3、读取模板文件，生成对应文件
const fs = require('fs');
const path = require('path');
const inquirer = require('inquirer');
const ejs = require('ejs');

// 在命令行询问用户输入信息
inquirer.prompt([
  {
    type: 'input',
    name: 'name', // 用户输入内容赋值给name
    message: 'Project name?', // 控制台显示提示语
  }
])
.then(anwsers => { // aswers为命令行用户输入的信息
  const tmplDir = path.join(__dirname, 'templates');
  const destDir = process.cwd(); // 当前命令行所在的目录下

  // 将模板下的文件全部转换到目标目录
  fs.readdir(tmplDir, (err, files) => {
    if (err) throw err;
    files.forEach(file => {
      // 通过ejs模板引擎渲染文件
      ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
        if (err) throw err;

        // 将结果写入目标文件路径
        fs.writeFileSync(path.join(destDir, file), result);
      });
    });
  });
});

6. 在当前目录下新建templates目录，放入一个test.js文件，文件内容<%= name %>指定用ejs语法填充数据。
7. 命令行输入yarn link将当前vue-cli-sample（项目名）链接到全局。
8. 新建空文件夹，该文件夹下打开命令行输入刚才链接的项目名vue-cli-sample即可执行该模块。然后按提示输入名字假设为test回车，会看到该空文件夹生成了test.js内容为test，则代表成功。

二、优化

将上面templates文件夹里的内容替换成我们前两步（实现vue-cli（一）：gulp自动化构建、实现vue-cli（二）：webpack实现项目打包）生成的 gulpfile.js、webpack配置内容和项目内容。此时vue-cli自动生成的不止一两个文件，文件多了会有几个问题，我们分别解决下。

1. fs.readdir只会读取一层目录，如果templates里有很多子目录，则ejs渲染目录会失败。我们用fs.stat方法增加个类型检测，如果是文件夹则继续遍历。
2. 遍历到新文件夹还要创建，不然最后生成文件会找不到文件夹。用yarn add mkdirp --dev添加对应插件。
3. 图片等文件是不需要用ejs进行渲染的，否则可能会错误地把<%=解析成填充内容，此处判断为图片就直接copy。

#!/usr/bin/env node

// 1、先询问用户信息
// 2、指定模板路径和生成路径
// 3、读取模板文件，生成对应文件
const fs = require('fs');
const path = require('path');
const inquirer = require('inquirer');
const ejs = require('ejs');
const mkdirp = require('mkdirp');

// 在命令行询问用户输入信息
inquirer.prompt([
  {
    type: 'input',
    name: 'name',
    message: 'Project name?'
  }
])
.then(anwsers => { // aswers为命令行用户输入的信息
  const tmplDir = path.join(__dirname, 'templates');
  const destDir = process.cwd();

  // 将模板下的文件全部转换到目标目录
  const handleFiles = (dir, rootDir) => {
    fs.readdir(dir, (err, files) => {
      if (err) throw err;
      files.forEach(file => {
        let filePath = path.resolve(dir, file);
        let targetPath = path.join(destDir, path.relative(rootDir, filePath));
        fs.stat(filePath, (err, stats) => {
          if (err) throw err;
  
          if (stats.isDirectory()) {
            mkdirp(targetPath).then(() => {
              handleFiles(filePath, rootDir);
            });
            return;
          }
          if (stats.isFile()) {
            // 如果是图片则直接copy不需要ejs渲染，不然文件中带有<%可能会出错
            if (/\.jpg$|\.gif$|\.png$|\.ico$/.test(filePath)) {
              fs.copyFileSync(filePath, targetPath);
              return;
            }
            // 通过模板引擎渲染文件
            ejs.renderFile(filePath, anwsers, (err, result) => {
              if (err) throw err;
  
              // 将结果写入目标文件路径
              fs.writeFileSync(targetPath, result);
            });
          }
        });
      });
    });
  }

  handleFiles(tmplDir, tmplDir);
});

最后，在空文件夹命令行执行vue-cli-sample自动生成对应资源，然后yarn install安装依赖包，执行yarn gulp develop打开浏览器页面正常即代表成功。