mkdir moka-cli

cd moka-cli
npm init -y

|-- moka-cli
 |-- package.json
 |-- bin
  |-- index.js

npm install commander inquirer chalk --save

package.json

{
 "name": "moka-cli",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
+ "type": "module",
+ "bin": {
+ "moka": "./bin/index.js"
+ },
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "dependencies": {
 "chalk": "^4.1.0",
 "commander": "^6.2.1",
 "inquirer": "^7.3.3"
 }
}

#!/usr/bin/env node

#!/usr/bin/env node

console.log('moka-cli run!')

npm install -g

$ moka
moka-cli run!

moka create vue vue-demo

$ moka create vue moka-demo
"_blank" href="https://github.com/chalk/chalk#usage" rel="external nofollow" >文档地址

可以在终端界面显示出多种颜色的文本和背景
核心功能


在根目录创建actions和templates目录,目录结构如下


|-- moka-cli
 |-- package-lock.json
 |-- package.json
+ |-- actions
+ | |-- create.js
 |-- bin
 | |-- index.js
+ |-- templates
+  |-- react
+  | |-- app.js
+  | |-- index.js
+  | |-- src
+  |  |-- index.js
+  |-- vue
+   |-- app.js
+   |-- index.js
+   |-- src
+    |-- index.js




templats下面用来存放通过CLI要生成的项目的模板，在这里先随便创建几个文件展示一下。
修改/bin/index.js文件


#!/usr/bin/env node
import create from '../actions/create.js';
import commander from 'commander';

const { program } = commander;

program.version('0.0.1');

program
 .command('create <template> [name]')
 .description('新建项目')
 .action(create);

program.parse(process.argv);



修改./actions/create.js文件


import fs from 'fs';
import path from 'path';
import chalk from 'chalk';
import inquirer from 'inquirer';

import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const TEMPLATES = ['vue', 'react'];

const targetPath = process.cwd();

function createTemplate(template, name) {
 const templatePath = path.join(__dirname, '../', `templates/${template}`);

 function readAndCopyFile(parentPath, tempPath) {
 let files = fs.readdirSync(parentPath);

 files.forEach((file) => {
  let curPath = `${parentPath}/${file}`;
  let stat = fs.statSync(curPath);
  let filePath = `${targetPath}/${tempPath}/${file}`;
  if (stat.isDirectory()) {
  fs.mkdirSync(filePath);
  readAndCopyFile(`${parentPath}/${file}`, `${tempPath}/${file}`);
  } else {
  const contents = fs.readFileSync(curPath, 'utf8');
  fs.writeFileSync(filePath, contents, 'utf8');
  }
 });
 }

 readAndCopyFile(templatePath, name);
}

function deleteTemplate(path) {
 if (fs.existsSync(path)) {
 fs.readdirSync(path).forEach(function (file, index) {
  var curPath = path + '/' + file;
  if (fs.lstatSync(curPath).isDirectory()) {
  // recurse
  deleteTemplate(curPath);
  } else {
  // delete file
  fs.unlinkSync(curPath);
  }
 });
 fs.rmdirSync(path);
 }
}

export default function create(template, name) {
 if (!TEMPLATES.includes(template)) {
 console.log(chalk.red(`No ${template} Template`));
 return;
 }

 const projectPath = path.resolve(targetPath, name);

 if (fs.existsSync(projectPath)) {
 inquirer
  .prompt([
  {
   name: 'template-overwrite',
   type: 'confirm',
   message: `Template named ${name} is already existed, are you sure to overwrite"htmlcode">

npm install -g



随便找一个路径，运行moka create <template> [name]命令来生成项目


moka create react react-demo



效果如下,会在该目录下生成一个react-demo的文件夹，里面存放的就是moka-cli项目中/templates/react下的所有


$ moka create react react-demo
react template has been created successfully!



如果在该目录下继续创建一个同名的项目，就会提示是否覆盖,输入y后继续执行


$ moka create react react-demo
? Template named react-demo is already existed, are you sure to overwrite? Yes
Template already existed , removing!
react template has been created successfully!



create命令的核心逻辑是通过node的fs模块来复制/templates下的文件，然后将其放到指定的路径下，具体实现直接看代码就可以来。
总结


CLI是提示前端开发效率的重要工具，如果有长期维护的项目，开发一个CLI来完成一些重复性的工作，是一个不错的选择。
moka-cli还没有上传github,等过段时间完善一些/templates下的项目模板，我会在文章里补充项目地址。