<!--

 * @Author: your name
 * @Date: 2020-09-29 19:03:31
 * @LastEditTime: 2020-10-10 23:34:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \fedesign-cli\docs\guide\README.md
-->
# 前端快速开发脚手架

## 概述

在实际的开发过程中，我们经常用官方提供的或者别人开发的脚手架，以节约项目搭建的时间。但寻找一款跟我们企规范相契合的脚手架可谓少之又少，这个时候开发我们自己的脚手架显得非常重要。它可以把企业中经常搭建使用的标准化项目做成模板，利用模板来快速搭建一个项目结构规范完整，契合公司和团队开发的项目，让开发人员的开发重点放在开发新业务上，提高开发效率。

## 什么是FED
FED是FRONTEND-DESIGN的简写,是一款快速构建标准化WEB项目的前端应用的脚手架工具。开发者只需要关注项目逻辑的代码，而不需要关心webpack打包、启动Node服务等诸如此类的这些问题。Vue-cli是一款基于模板化的开发工具，等于就是把别人的项目结构给照搬过来，所有的配置都是暴露出来的，你可以根据实际情况去做一些配置的修改，更加灵活自由一点。就是一个集成项目初始化、调试、构建、测试、部署等等流程，能够让使用者专注于code的工具。脚手架是为了保证施工过程顺利进行而搭设的工作平台。在项目开发中我们把创建项目结构模版的工具也称之为脚手架。如vue-cli，create-react-app等。这些脚手架等原理都一样，即用Node.js命令行程序生成项目模版。

## 特点

- 集成项目初始化
- 集成项目调试
- 集成项目构建
- 集成项目测试
- 集成项目部署
- 让项目搭建更加规范
- 让项目更好维护
- 让使用者专注业务开发而简化配置工作
## 环境要求
FEDESIGN 项目基于 node，请确保已具备较新的 node 环境（>=8.0.0），推荐使用 node 版本管理工具 [nvm](https://github.com/nvm-sh/nvm) 来管理 node，这样不仅可以很方便地切换 node 版本，而且全局安装时候也不用加 sudo 了。
## 常用工具

| 名称         | 工具名称                                                     | 链接地址                                                     |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| 交互命令     | [commander](https://www.npmjs.com/package/commander)         | https://www.npmjs.com/package/commander                      |
| 文件拉取     | [download-git-repo](https://www.npmjs.com/package/download-git-repo) | https://www.npmjs.com/package/download-git-repo              |
| 命令行交互   | [inquirer](https://www.npmjs.com/package/inquirer)           | https://www.npmjs.com/package/inquirer                       |
| 替换模板内容 | [handlebars](https://www.npmjs.com/package/handlebars)       | https://www.npmjs.com/package/handlebars                     |
| 美化命令行   | [chalk](https://www.npmjs.com/package/chalk) [ora](https://www.npmjs.com/package/ora) | https://www.npmjs.com/package/chalk / https://www.npmjs.com/package/ora |

## 脚手架包含内容

- 安装命令
- 操作命令
- 模板库

## 常见脚手架
- create-react-app
- vue-cli

## 搭建脚手架
```
# 创建项目文件夹
$ mkdir project-name && cd project-name
# 初始化package.json
$ npm init -y
```
在package.json中增加两项
```
"bin":{
	"fedesign":./bin/fedesign",
	"fedesign-init": "./bin/fedesign-init",
    "fedesign-add": "./bin/fedesign-add",
    "fedesign-delete": "./bin/fedesign-delete",
    "fedesign-list": "./bin/fedesign-list",
    "fedesign-build": "./bin/fedesign-build"
}
"private":false
```
- bin目录下的testCli 表示，我们在命令行输入testCli 则会调用main.js内的内容，
- bin目录下的fedesign表示，:./bin/fedesign",
- bin目录下的fedesign-init表示，": "./bin/fedesign-init",
- bin目录下的fedesign-add表示，": "./bin/fedesign-add",
- bin目录下的fedesign-delete表示，": "./bin/fedesign-delete",
- bin目录下的fedesign-list表示，": "./bin/fedesign-list",
- bin目录下的fedesign-build表示，": "./bin/fedesign-build"
- private:false 表示内容是公开的，即可以被npm发布的
```
#!/usr/bin/env node 
```
- 其中 #!/usr/bin/env node 的作用就是这行代码是当系统运行到这一行的时候，去 env 中查找 node 配置，并且调用对应的解释器来运行之后的 node 程序
然后我们需要测试代码，这里可能需要用到 npm link 或者 npm install -g 。这样在命令行执行testCli就可以看到你在main.js中写入的代码，这里写一个hello world


    npm link: 将当前package链接到全局 —— npm unlink
    
    npm install -g: 将当前package安装到全局 —— npm uninstall -g

## bin的作用就是官网是这样解释的
许多npm包都具有一个或多个要安装到PATH中的可执行文件。package.json中提供一个字段bin，该字段是命令名到本地文件名的映射。在安装时，npm会将文件符号链接到prefix/bin以进行全局安装或./node_modules/.bin/本地安装。说白了，就是在安装的时候，会创建一个快捷方式，通过快捷方式能够很方便的使用对应的node脚本命令。这也是为什么我们可以直接随便打开命令行，通过create方式创建项目。
而对应的index.js文件，在开头必须以#!/usr/bin/env node。usr/bin/env表示可以去PATH目录中查找脚本解释器，同时指定使用node去执行该文件。开发者只需要关注项目逻辑的代码，而不需要关心webpack打包、启动Node服务。

然后再通过npm link，在全局中创建符号链接，将package.json里的bin字段内容进行映射链接。在任何地方输入都可以使用fedesign命令。