leo:从工程化角度出发的前端脚手架

4,191 阅读5分钟

leo 是京东iPaaS前端团队开发的一个支持覆盖前端开发全链路、可扩展、可定制,同时为模板、构建器、扩展命令市场等丰富的周边生态提供配置化支持的前端脚手架工具。

前端脚手架的由来

前端脚手架是伴随着业务复杂度提升而来的提效工具。

在团队规模小或者业务比较简单的时候,项目的初始化往往是直接从一个已有的项目中拷贝出来,根据情况删掉一部分代码(之前业务强相关的或者不需要的功能等),再修修补补一部分,即可开始新的开发。

随着业务发展,几个人之间的拷贝已经不能满足需要(拷贝的源头无法追溯,出了问题也不知道是哪个版本的问题),项目初始化也变成了把这个模板代码放在 git 仓库中维护起来,需要新建项目时,将代码克隆下来,删除 .git 目录,再重新上传到新项目的仓库。

伴随着业务的复杂度上升,模板代码的仓库也变得多了起来,在新建一个项目时,开发人员不仅要在众多仓库中找到应该克隆哪个仓库,还需要每次都走一遍流程:克隆代码 → 删除.git目录 → 关联并 push 到新仓库,为了提高效率,开发将这个过程封装成 CLI 命令,如 fe-cli,在新建项目时仅需执行fe-cli projectName即可。

前端脚手架的现状

在前端开发的流程中,一个典型的开发流程大概是这样的:

1.png

脚手架的作用仅存在于第一步,在初始化后的每一步骤中,全部是由开发自定义的(通常是小组或团队内部的规范):使用什么方式构建,使用哪个测试工具,代码 lint 的标准,部署时如何审批等等。即便是小范围的内部规范,在不同的项目内,也有可能存在差异。

不仅如此,脚手架通常存在于内部的小团队内,这些脚手架提供的模板即便是非常优秀,也往往局限在内部,无法被其他团队发现和使用,导致只能做到团队内部的提效,无法在团队、部门甚至公司层面做到复用和标准化。

上述的是老团队的情况,而对于一个新组建的团队来说,在繁重业务开发中想要抽取人力去开发一个脚手架往往是有心无力的,团队内的初始化可能又回到了复制粘贴的时代。

leo 提供的解决方案

针对上述痛点,我们的团队在调研并收集开发同学意见后,开发了 leo 脚手架作为解决方案,如下图所示,各团队内部相互闭塞的开发改为由 leo 统一提供服务,团队内部不仅降低了维护自己脚手架的成本,还可以享受到其他团队提供的服务。

2.png

零成本接入

无论是新团队接入,还是老团队将就有项目模板迁移,仅需使用leo init template初始化出一个模板文件,将自己的模板项目移入template文件夹中并推送到远端(在初始化时,leo 会在 template 市场中自动创建并关联项目)。推送后,就可以通过leo init your-template-name来初始化你的模板了。

覆盖开发全链路

不同于过去脚手架仅在初始化中发挥作用,leo 通过模块化的设计,使得指令覆盖于开发的全链路当中。

3.png

在开发的每个流程中,都可以使用官方或者自定义的工具来支持当前流程的功能,以开发调试为例,官方提供了react-builder作为默认的构建工具,但是如果你使用的是gulprollup等其他构建工具,可以通过编写一个builder来支持项目的构建流程(与模板接入相同,仅需初始化后写入构建功能并推送即可)。

leo 市场

在上述接入的描述中你可能已经发现,在初始化一个模板或者builder文件时,leo会同时将这个项目同步到对应市场中,从前仅在团队内部使用的模板与构建功能将会服务于更多的 leo 使用者

4.png

leo 的设计思路

5.png

分层设计

leo 的结构设计分为 3 层,核心逻辑层,功能模块层和业务逻辑层,每个分层如命名所示按照功能区分,分层之间单向依赖

模块化

在每个分层中,不同的功能模块负责各自的使命,Core 负责登录,埋点(leo 的数据统计)等,Cli 负责处理命令行指令,并提供命令行交互,Generator 负责模板生成,builder 负责构建及本地开发。

多扩展

业务逻辑层的 template 市场和 builder 市场实际是由开发者共同维护的,leo 仅提供了一些基础的模板和构建器,每个开发者及团队都可以在市场中进行发布,发布后受惠的也不再局限于个人和团队内部,任何人都可以看到下载并使用(最佳实践:使用 leo 开发的通天塔 ihub 楼层已达 300+)

如何使用

leo作为一个脚手架框架,你需要做一些必要的配置才能在本地运行。

  1. 创建项目并安装

    npm i @jdfed/leo-core
    
  2. 新建一个脚手架项目目录如下

    yourProject
     |- bin
     |   |- index.js
     |- package.json
    
  3. package.json 中声明你的指令入口

    {
      "bin": {
        "yourCommand": "bin/index.js"
      }
    }
    
  4. bin/index.js中配置leo/core并启动

    #!/usr/bin/env node
    
    const LeoCore = require('@jdfed/leo-core').default;
    
    const customConfig = {
      // 模板仓库group
      gitTemplateGroupURL: '',
      // 项目中配置文件名,默认为 leorc.js
      rcFileName: 'xxx-rc.js',
    };
    
    const customCore = new LeoCore({
      config: customConfig,
      hooks: {
        beforeStart() {
          console.log(this.leoRC);
        },
        afterCommandExecute() {
          console.log(this);
        },
      },
    });
    
    customCore.start();
    

    查看更多配置项

更多文档

开源撒花

leo 脚手架作为脚手架框架(与内部使用略有不同)已开源至 github,为更多开发者提供了便利,github 地址,欢迎 star~