前端工程化

在谈脚手架工具之前，必须先了解什么是前端工程化，规范的说是把软件工程相关的方法和思想应用到前端开发中，而开发过程包括构建、管理、测试和部署等阶段。另一方面，也可以认为前端工程化是使用一系列工具和技术来提升前端开发效率，降低管理成本的过程。
前端工程化使用到了许多技术和工具，包括自动化构建、模块化打包、代码标准化、自动化测试、自动化部署等等方面。今天主要要讲的是脚手架工具，因为脚手架工具是前端工程化的发起者，它可以自动创建项目基础结构，提供项目规范和约定。

什么是脚手架

在创建新项目的时候，项目中会有一些相同的组织结构，相同的开发范式，相同的模块依赖，相同的工具配置，相同的基础代码。使用脚手架工具可以快速搭建一个特定的项目骨架，把这些大量的重复的机械性的复杂的工作交给工具来完成，开发者可以直接在创建好的项目架子上开发，这也是为什么称这类工具为脚手架的原因。实际上，使用集成 IDE 创建项目的过程与脚手架的功能是类似的。
脚手架工具的工作原理也十分简单，在启动脚手架之后，它会自动的询问一些预设的问题，然后根据你的回答去下载特定的项目结构。通常大型的框架都会提供它们专属的脚手架来创建项目结构，但是在某些场景下需要我们构建自定义的脚手架工具来满足自己的需求。

自定义脚手架

如果要创建一个自定义的脚手架工具，可以自己从零开始创建项目；也可以使用一些通用型脚手架工具来自定义脚手架功能。下面介绍一下脚手架工具如何从零创建，以便更好去理解脚手架工具的工作原理。

项目初始化

先新建一个文件夹叫 mycli，使用 npm init -y 创建一个 package.json 文件，在同目录下创建 bin 文件夹，在 bin 文件夹中创建 index.js 文件作为脚手架脚本入口文件。

1234
mycli 
├─ bin
|   └─ index.js 
└─ package.json

在 index.js 脚本入口文件的最上方写上下面的声明，表示脚本使用 node 来执行。

12
#! /usr/bin/env node
console.log('hello, world')

在 package.json 文件中配置 bin 的入口文件路径。

1234567
{
  ...,
  "bin": {
    "mycli": "bin/index.js"
  },
  ...
}

保存后在命令行输入 link 命令，将当前项目的路径链接到全局环境。

1
$ npm link

至此，一个脚手架项目就初始化完成了，可以在终端任何路径下执行 mycli 命令。

12
$ mycli
> hello, world

使用工具库

开发脚手架功能的工具库有很多，下面的一些库比较常用，能满足大多数需求：

1. commander 命令行自定义指令
2. inquirer 命令行问答交互
3. download-git-repo 下载远端项目模板
4. ora 命令行任务等待工具
5. chalk 命令行样式渲染工具

关于这些库的使用可以参考它们的文档，这里就不展开介绍了，以后有机会可以在具体介绍一下。

发布 npm

在完成开发后，将项目发布到 npm 包管理系统上，在发布前先注册一个 npm 账号。
发布流程分俩步：

1. 执行 npm login 登录 npm 账号
2. 执行 npm publish 进行发布

发布到 npm 的脚手架名称就是 package.json 的 name 值，要注意的是发布名称不能重复，发布完之后验证一下是否发布成功：

1. 执行 npm unlink 解绑一下全局链接
2. 执行 npm install mycli -g 全局安装脚手架
3. 执行 mycli -h 查看是否成功