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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
</head>
<body>
    
</body>
</html>

react.ejs

import React, {useState} from 'react'

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

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

<template>
  <div><%= title %></div>
</template>

<script>
export default {
    data() {
        return {
            data: "<%= title %>"
        }
    }   
}
</script>

<style>

</style>

第五步：核心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("生成目录生成完成！")
  });