0-1项目脚手架命令行生成项目目录

这应该是在公司的基建团队都会做的事情吧。

类似于create-react-app这样的react项目快速搭建工具，它们都有自己的生成目录的命令。

npx create-react-app my-app

这次要分享的是我之前已经做好的最简单的命令行脚手架demo，用到了terminal-kit，inquirer，ejs这几个插件。

1.terminal-kit输出美化插件
2.inquirer命令行交互插件
3.ejs通过.ejs高效输出文件

我们按照命令一步一步来
第一步：初始化目录

npm init

第二步：安装相关插件

npm install ejs inquirer terminal-kit

第三步：完善package.json配置
这里的bin是用来配置命令行命令的这里的可以在根目录执行npm link就可以在全局命令行使用“cli”命令。

{
  "name": "hong-cli",
  "version": "1.1.4",
  "description": "试验脚手架",
  "main": "index.js",
  "scripts": {
    "cli": "node cli.js"
  },
  "author": "",
  "license": "ISC",
  "bin": {
    "cli": "node cli.js"
  },
  "keywords": [
    "cli"
  ],
  "dependencies": {
    "commander": "^8.3.0",
    "ejs": "^3.1.6",
    "inquirer": "^8.2.0",
    "terminal-kit": "^2.3.0"
  }
}

第四步：新建模板目录和相关的ejs以及html文件
index.html

react.ejs

import React, {useState} from 'react'

export default () => {
    return 
<%= title %>
}

vue.ejs（时间是有点早了所以模板是vue2）

第五步：核心cli.js
解释一下下面的代码吧
1.#!/usr/bin/env node这个是表示该文件是node脚本并指定node环境的目录
2.命令行中拿到的输入值通过ejs将ejs模板中的插入的<%= title %>字段替换成对应的输入值，最终输出到当前执行命令的目录中也就是process.cwd()

#!/usr/bin/env node
// 指定运行环境

const ejs = require("ejs");
const inquirer = require("inquirer");
const fs = require("fs");

const process = require("process");

const path = require("path");

const terminal = require('terminal-kit')

console.log(process.cwd());

inquirer
  .prompt([
    {
      type: "input",
      message: "输入你的名字",
      name: "value", // 本次交互数据的键名称
    },
  ])
  .then((res) => {
    const resHtml = ejs.render(
      fs.readFileSync(
        path.resolve(__dirname, "./templete/index.html"),
        "utf-8"
      ),
      {
        title: res.value,
      }
    );
    resHtml &&
      fs.writeFileSync(process.cwd() + "/index.html", resHtml, "utf-8");
    const resHtml1 = ejs.render(
      fs.readFileSync(path.resolve(__dirname, "./templete/vue.ejs"), "utf-8"),
      {
        title: res.value,
      }
    );
    resHtml1 && fs.writeFileSync(process.cwd() + "/vue.vue", resHtml1, "utf-8");
    const resHtml2 = ejs.render(
      fs.readFileSync(path.resolve(__dirname, "./templete/react.ejs"), "utf-8"),
      {
        title: res.value,
      }
    );
    resHtml2 &&
      fs.writeFileSync(process.cwd() + "/react.tsx", resHtml2, "utf-8");
    terminal.terminal.green("生成目录生成完成！")
  });

体验

npm run cli

输入姓名后回车就会在当前目录中生成相关的项目文件。

最后

        通过npm publish命令可以将脚手架发布到npm上后续npm install XXX -g就能在全局使用配置package.json中配置好的bin脚本命令。

总结

        这样的脚手架在大的公司团队中有很大好处，可以定制公司自己的项目架构，快速搭建项目，约束规范公司开发规范。

胜利和败北都要品尝、经历过四处逃窜的辛酸、痛苦和悲伤的回忆、这样才能独当一面、就算痛哭流涕也没关系！一定要闯过这一关。