一、vue-cli的简单实现
- 新建一个vue-cli-sample的文件夹，该文件夹下打开命令行，输入
yarn init生成package.json文件。 - package.json文件中新增一行
"bin": "cli.js"指定cli.js作为入口文件。 - 新建cli.js文件，第一行写入
#!/usr/bin/env node。因为Node cli应用入口文件必须有这样的文件头，如果是linux或者macOS系统还需要通过命令行输入chomd 755 cli.js修改读写权限。 - 命令行输入
yarn add inquirer ejs --dev安装用户问询模块和模板渲染引擎。 - 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);
});
});
});
});
- 在当前目录下新建templates目录，放入一个test.js文件，文件内容
<%= name %>指定用ejs语法填充数据。 - 命令行输入
yarn link将当前vue-cli-sample（项目名）链接到全局。 - 新建空文件夹，该文件夹下打开命令行输入刚才链接的项目名
vue-cli-sample即可执行该模块。然后按提示输入名字假设为test回车，会看到该空文件夹生成了test.js内容为test，则代表成功。
二、优化
将上面templates文件夹里的内容替换成我们前两步（实现vue-cli（一）：gulp自动化构建、实现vue-cli（二）：webpack实现项目打包）生成的 gulpfile.js、webpack配置内容和项目内容。此时vue-cli自动生成的不止一两个文件，文件多了会有几个问题，我们分别解决下。
-
fs.readdir只会读取一层目录，如果templates里有很多子目录，则ejs渲染目录会失败。我们用fs.stat方法增加个类型检测，如果是文件夹则继续遍历。 - 遍历到新文件夹还要创建，不然最后生成文件会找不到文件夹。用
yarn add mkdirp --dev添加对应插件。 - 图片等文件是不需要用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打开浏览器页面正常即代表成功。
