# god-cli **Repository Path**: jiadeyu/god-cli ## Basic Information - **Project Name**: god-cli - **Description**: vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。 通过定制属于自己的脚手架，可以符合自己或公司实际应用项目，用以提升自己或公司的开发效率 - **Primary Language**: JavaScript - **License**: MulanPSL-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-04-25 - **Last Updated**: 2022-06-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 自建简单的 god-cli ### 简介 #### 什么是脚手架？ 随着前端工程化的概念越来越深入人心，脚手架应运而生。简单来说，「前端脚手架」就是指通过选择几个选项快速搭建项目基础代码的工具。前端脚手架可以有效避免我们 ctrl + C 和 ctrl + V 相同的代码框架和基础配置。 #### 为什么要用脚手架？ - 减少重复性的工作，不需要复制其他项目再删除无关代码，或者从零创建一个项目和文件。 - 可以根据交互动态生成项目结构和配置文件。 - 多人协作更为方便，不需要把文件传来传去。 #### 为什么要自建脚手架？ $\color{#00ff00}{vue-cli}$, $\color{#00ff00}{create-react-app}$、$\color{#00ff00}{react-native-cli}$ 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。 通过定制属于自己的脚手架，可以符合自己或公司实际应用项目，用以提升自己或公司的开发效率 ### 脚手架雏形 脚手架就是在启动的时候询问一些简单的问题，通过用户回答的结果让脚手架自动去完成一些工作 $\color{#00ff00}{工作流程：}$ 1. 通过脚手架启动命令，开启询问交互 2. 根据用户回答的结果生成文件 参考 vue-cli 脚手架来创建一个 vue 项目： 1. 运行创建命令： ```js vue create hello-world ``` 2. 询问用户问题： ```js Vue CLI v5.0.3 ┌─────────────────────────────────────────┐ │ │ │ New version available 5.0.3 → 5.0.4 │ │ Run npm i -g @vue/cli to update! │ │ │ └─────────────────────────────────────────┘ ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features ``` 我选择的是 Vue3 3. 生成符合用户需求的项目文件如下： ```js . └── hello-world ├── README.md ├── babel.config.js ├── jsconfig.json ├── node_modules ├── package-lock.json ├── package.json ├── public ├── src └── vue.config.js ``` 接下来我们就可以参考上面的流程$\color{#00ff00}{搭建一个脚手架雏形}$ ### 1. 命令行启动 cli 需求 1：完成在命令行执行$\color{#00ff00}{god-cli}$来启动我们的脚手架 1. 新建项目目录：god-cli ```js mkdir god-cli cd god-cli npm init -y // 生成package.json文件 ``` 当前 god-cli 文件目录如下： ```js god-cli ├── LICENSE ├── README.md └── package.json ``` 2. 新建程序入口文件 cli.js ```js touch god-cli.js ``` 此时 god-cli 目录下比上一步多了一个 god-cli.js 文件 ```js god-cli ├── LICENSE ├── README.md ├── god-cli.js └── package.json ``` 3. package.json 文件修改配置，并添加测试内容 ```js // 手动添加bin字段：入口文件为god-cli.js { "name": "god-cli", "version": "1.0.0", "description": "xxx", "main": "god-cli.js", "bin": "god-cli.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://gitee.com/jiadeyu/god-cli.git" }, "author": "", "license": "ISC" } ``` ```js // cli.js // 用于检查入口文件是否正常执行 cons.log("godCli.js start working!"); ``` 4. npm link 链接到全局 ```js npm link ``` 执行完成，命令行提示： changed 1 package, and audited 3 packages in 39s found 0 vulnerabilities 至此，我们完成了第一个需求，能在命令行使用$\color{#00ff00}{god-cli}$，并能运行$\color{#00ff00}{cli.js}$文件 ### 询问用户信息 需求 2：实现命令行输入$\color{#00ff00}{god-cli}$时，弹出询问用户信息的功能 1. 引入[Inquirer.js](https://github.com/SBoudrias/Inquirer.js/) ```js npm install inquirer -D ``` 2. 在$\color{#00ff00}{cli.js}$中设置问题 ```js #! /usr/bin/env node // #! 符号的名称叫 Shebang，用于指定脚本的解释程序 // Node CLI 应用入口文件必须要有这样的文件头 const inquirer = require("inquirer"); inquirer .prompt([ { type: "input", name: "name", message: "project name", default: "my-app", }, ]) .then((answers) => { // 打印用户输入的内容 console.log(answers); }); ``` 命令行执行：$\color{#00ff00}{god-cli}$ ```js ? project name (my-app) ``` 至此，我们成功完成了询问用户问题，并让用户可输入的需求 ### 3. 生成对应的文件 需求 3： 用户回应问题后，生成对应的文件 1. 新建模板文件夹$\color{#00ff00}{templates}$ ```js mkdir templates ``` 2. 在 templates 目录下新建两个示例文件 ```js cd templates touch index.html touch common.css ``` 给示例文件分别添加内容 ```html <%= name %>

<%= name %>

``` ```css /* common.css */ body { margin: 20px auto; background-color: azure; } ``` 此时文件目录结构如下： ```js god-cli ├── LICENSE ├── README.md ├── god-cli.js ├── package-lock.json ├── package.json └── templates ├── common.css └── index.html ``` 3. 完善文件生成逻辑 借助 ejs 模板引擎将用户输入的数据渲染到模板文件中 ```js npm install ejs -D ``` 完善cli.js逻辑 ```js #! /usr/bin/env node const inquirer = require('inquirer') const path = require('path') const fs = require('fs') const ejs = require('ejs') inquirer.prompt([ { type: 'input', //type：input,confirm,list,rawlist,checkbox,password... name: 'name', // key 名 message: 'Your name', // 提示信息 default: 'my-node-cli' // 默认值 } ]).then(answers => { // 模版文件目录 const destUrl = path.join(__dirname, 'templates'); // 生成文件目录 // process.cwd() 对应控制台所在目录 const cwdUrl = process.cwd(); // 从模版目录中读取文件 fs.readdir(destUrl, (err, files) => { if (err) throw err; files.forEach((file) => { // 使用 ejs 渲染对应的模版文件 // renderFile（模版文件地址，传入渲染数据） ejs.renderFile(path.join(destUrl, file), answers).then(data => { // 生成 ejs 处理后的模版文件 fs.writeFileSync(path.join(cwdUrl, file) , data) }) }) }) }) ``` 命令行执行$\color{#00ff00}{god-cli}$，用户输入godApp 至此，我们成功完成了通过询问，根据用户输入生成模板文件 ```html godApp

godApp

``` ```css body { margin: 20px auto; background-color: azure; } ``` 此时文件目录如下： ```js god-cli ├── LICENSE ├── README.md ├── common.css ├── god-cli.js ├── index.html ├── package-lock.json ├── package.json └── templates ├── common.css └── index.html ``` ## 热门脚手架工具库
名称简介
commander 命令行自定义指令
inquirer 命令行询问用户问题，记录回答结果
chalk 控制台输出内容样式美化
ora 控制台 loading 样式
figlet 控制台打印 logo
easy-table 控制台输出表格
download-git-repo 下载远程模版
fs-extra 系统fs模块的扩展，提供了更多便利的 API，并继承了fs模块的 API
cross-spawn 支持跨平台调用系统上的命令
## 👉🏻[使用脚手架工具搭建自己的脚手架](https://gitee.com/jiadeyu/mgod-cli.git) 使用脚手架工具能帮我们搭建出更方便、健全、美观、效率的脚手架来