前端脚手架实践

每天学一点，分享我的所得。
今天给大家带来的是前端脚手架的搭建过程，搭建脚手架我肯定参考了很多大佬的博客和相关的视频，最后亲自动手实现一遍，方能融会贯通。

企业中开发中的问题

工具的出现，必然是要解决一个或一类问题。笔者列出几点自身的体会。

• 技术栈不统一。在公司做项目，使用的技术栈都是经过选型之后的，不是单一技术而是多种技术的融合。每加入一个新技术，都需要进行相关的配置，有时可能还要二次封装。
• 没有沉淀。每个项目团队基于自身产品线，往往都会沉淀一些公用的方法、类等（如时间转换、交互数据格式等）。
• 项目目录不规范，很难维护别人的代码。
• 打包、部署每次都要修改脚本。
  总结一下，就是重复做的事情太多，没有规范、没有指导。

脚手架能做什么

1. 统一项目组的技术栈，预先配置好相关文件，开箱即用。比如用React，就要把React全家桶引入项目，并做相应的配置（react-router、redux…）。
2. 业务线公用的方法和库，不用每次手动移植。
3. 统一项目目录结构，方便开发人员协作开发，对新人友好。
4. 实现前端工程化。

搭建思路

我们一定使用过，create-react-app或vue-cli这些官方的脚手架。回忆下使用方式：

create-react-app my-app
// vue create my-app

在进入到my-app目录，从package.json文件中找到对应的命令，执行即可开发自己的项目了。
这里我们把整个流程抽象一下：
1.先通过npm安装了一个包（脚手架）
2.这个包里有一个可执行文件，可以在全局执行对应的命令（非全局也可）。
3.执行命令，会将用户输入的信息捕获，并与用户交互。
4.命令最终会将一个配置好的模板，拷贝到用户本地目录下，可以直接用它来开发项目。

借助工具

互联网时代，学会将多种工具组合使用来达成自己的目标，也是一种能力。这里列出开发脚手架基础的包

• commander：获取终端输入的参数
• inquirer：交互式命令行工具
• download-git-repo：下载模板
• chalk：美化控制台显示

搭建流程

话不多说，上菜

1. 首先，我们要发布一个npm包。这样就可以让团队其他成员共享。包里需要暴漏一个命令，供开发者使用。

mkdir demo-cli & cd demo-cli
npm init -y

然后，目录下新建bin文件夹并新建可执行文件www，修改package.json文件，增加bin属性配置脚本路径。

2. 接下来，我们实现个小需求：终端指令demo-cli回车，打印“hello demo-cli”这里说一下，www文件中第一行，这个告诉操作系统，当前脚本在node环境下执行。在项目下执行npm link，将当前项目与npm模块建立连接。可以看到输出正确。
3. 接着，我们来实现获取参数及终端交互功能。先来实现个小需求：输入指令demo-cli打印提示信息，输入demo-cli create命令正确打印成功，其他命令均提示失败。这里需要安装commander，具体使用方法百度。简单说下，commander有执行顺序，要按照套路来写。command方法，接收命令字符串，匹配成功后，执行action函数。没匹配到提示错误。演示下：
4. 重头戏来了。我们要通过命令，把远程模板下载到本地。这里我把模板放在github上，没有放在脚手架里，目的是让脚手架和模板库解耦。这里要用到download-git-repo这个包去下载模板（整个项目的核心—下载模板），先在github上建立一个模板再说。这里我直接使用之前的模板了，其实就是一个webpack搭建的项目，大家可以自由发挥。现在我们将要将两者进行关联。但之前，还要完成两件事：1.获取当前执行命令的所在目录及参数。2.判断输入的项目名称是否存在。通过全局process对象，可以获取demo-cli create 后面的输入，创建是一个对立的动作，新建个文件把它分离出去。解释下：第一步，先获取项目名称(这里是简单实现，假设命令固定格式为demo-cli create xxx没有其他参数)。第二步，如果项目名称不存在则创建项目，downloadGitRepo的使用方法，npm上很具体不多说。现在，我们在任意目录下执行命令，都能将远程仓库的模板拉到本地文件夹下。机智的你肯定发现了缺陷。下载下来的准确说是文件，不是模板。我们希望，模板是活的，里面的内容可以根据输入动态改变。
5. 让模板活起来。思路是这样的：从远程下载文件到本地->读取下载的内容->将文件中特殊标识提换成用户输入->生成对应的文件及目录->将原目录删除。
   这里我是用metalsmith这个工具。它是一个静态网站生成器,功能强大。可以处理模板文件，源文件到目标文件的转换。强大插件功能，处理各种类型文件。模板引擎这里使用的是handlebars。其他模板语言都可以，之后会指出这里列出核心函数。解释：在上一步，我们把git上的模板已经下到本地了。现在改一下存放路径，先放在临时目录(模板文件里有些{{xxx}}要替换)，接着把临时目录、目标目录和要替换的key-value传进来，use函数的使用方法官方文档已给出。file.contents也在官网中。成功后删除临时目录。至此固态脚手架功能已完成（不可配置）
6. 丰富美化。执行命令后，控制台没有任何提示，对用户很不友好。这里使用ora。封装了下ora的方法。现在在执行时就出现动画效果了。
7. 目前，输入完命令(demo-cli create xxx)后，就自动执行期间不再理会用户，这么任性肯定会被打的。能收集用户的需求才是好产品。使用inquirer，来与用户交互。现在这个脚手架算是可以见人了。
   [项目源码]