搭建前端脚手架

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

企业中开发中的问题

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

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

脚手架能做什么

  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属性配置脚本路径。
  1. 接下来,我们实现个小需求:终端指令demo-cli回车,打印“hello demo-cli”

    这里说一下,www文件中第一行,这个告诉操作系统,当前脚本在node环境下执行。在项目下执行npm link,将当前项目与npm模块建立连接。
    可以看到输出正确。
  2. 接着,我们来实现获取参数及终端交互功能。先来实现个小需求:输入指令demo-cli打印提示信息,输入demo-cli create命令正确打印成功,其他命令均提示失败。这里需要安装commander,具体使用方法百度。

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

    封装了下ora的方法。现在在执行时就出现动画效果了。

  6. 目前,输入完命令(demo-cli create xxx)后,就自动执行期间不再理会用户,这么任性肯定会被打的。能收集用户的需求才是好产品。使用inquirer,来与用户交互。
    现在这个脚手架算是可以见人了。
    项目源码

你可能感兴趣的:(搭建前端脚手架)