基于yeoman定制的交互式命令行脚手架【金沙官网

金沙官网线上 1

脚手架这个词估计做前端的都很熟悉。在没有实现前端工程化的年代,前端代码的组织都是纯手工维护的。比如我要做一个网站页面,那么我需要手动创建一个文件夹来存放代码文件,我把它命名为demo。然后在demo目录下创建src文件夹,在src文件夹内创建css文件夹、js文件夹、image文件夹、lib文件夹等等...一切都是手工维护。自从node.js出现后,前端开发才慢慢开始告别刀耕火种,越来越多的自动化工具充斥我们的眼球。模板生成、代码压缩、构建打包、自动部署...这些已经成为构建前端工程项目的标配。那么,一个模板生成的命令行工具的原理是什么?怎样开发一个属于自己的命令行脚手架工具?希望我写的这篇小文章会给大家带来一点启发。

一.Yeoman是什么

Yeoman是现代化前端项目的脚手架工具,用于生成包含指定框架结构的工程化目录结构。它是整个前端自动化工厂的第一站。

从个人使用者的角度来看,Yeoman的地位有些鸡肋,因为流行框架自带的cli工具都能够自动生成官方推荐的目录结构,而且一个项目持续少则几个月多则几年,而项目的初始化结构目录在此期间只需要生成一次。尽管工具的设计定位如此,但在组件化开发的潮流中,使用Yeoman来生成符合项目编码规范的组件框架是非常有必要的。

为了降低项目的维护成本,将要求的组件结构和必要的使用说明生成组件模板,使用Yeoman工具来直接生成,当项目的体积越来越大时,你就会体会到这种方式的好处。

原理

生成模板文件的方式可以是本地新建空白文件,然后进行文件内容读写;又或者是把本地已有的模板进行配置信息填充。然而我们知道,IO读写的速度非常慢,性能消耗大。但是一个模板生成器(Generator)如果是基于已有的模板文件进行配置填充,然后在copy到项目目录对应的位置,那会比直接读写磁盘效率更高。所以一般来说,模板生成器会采用第二种工作原理。

二.Yeoman的一般使用方法

详情请参考【Yeoman官方网站】

1.使用包管理工具安装yo

  • 使用npm:npm install -g yo

  • 使用yarn:yarn global add yo

    安装后在命令行输入yo --version,显示版本号则安装成功。

2.下载项目目录模板generator-XXX

开源社区有非常多的项目目录模板,在命令行输入npm install generator-fountain-webappyarn add generator-fountain-webapp安装项目模板。Fountain可以定制安装各类集成的javascript框架和CSS框架。

3.用指定模板初始化项目目录

在当前文件夹开启命令行,输入yo XXX(XXX为generator模板后缀的名称,例如yo fountain-webapp),根据交互式命令行信息填写参数,最终即可生成项目目录。

[使用fountain-webapp模板示意图] 金沙官网线上 2

4. 子模板的使用

如果模板支持子模板功能,用户通过yo XXX:YYY即可生成项目组件,例如yo angular : controller生成一个angularjs项目中控制器的代码骨架)。

Yeoman-generator

模板生成器的脚手架有很多,前端领域每天都会有很多类似的轮子源源不断地从开源社区流出。这里我用来开发自己的generator的工具是Yeoman。Yeoman的Logo是一个戴着红帽子的大胡子,它是一个通用的脚手架搭建系统,可以创建任何的类型的app。同时它又是"语言无感知"的,支持创建任何类型开发语言的项目,Web, Java, Python, C# 等等。Yeoman的通用性在于,它本身不做任何决定,所有的操作都是通过Yeoman环境里面的各种generator实现的。通过自定义generator,我们可以创建任何格式的项目目录。这是Yeoman的最大魅力之处。另外,Yeoman通过提供promting这个方法实现输入式命令行交互,可以让用户自由填写配置信息,交互体验也非常棒。下面说说怎样基于Yeoman开发一个简单的generator:

三.构建自己的脚手架

你的团队很可能有自己封装的框架,无法使用现有的generator,同时yo的速度不是很稳定(据说是因为内置的generator搜索机制和墙的原因),庆幸地是其官方团队开源了yeoman代码,并有详细的文档解释其运行原理和机制,让开发者可以根据团队需求定制合适的generator生成器。

Simple-dir

simple-dir是我自己捣鼓的一个很简单的Yeoman-generator,在这里我拿它来作为讲解示例,大家也可以打开详细代码来看,欢迎star,也欢迎提issue。

3.1 使用方法

你可以通过如下方式使用它:

  1. 通过在自己的项目中引用yeoman-generator,使用yeomanAPI编写定制的模板文件(注意使用此种方法时,如果希望通过yo来调用生成器,则需要按指定的方式编写package.json文件)。
  2. 下载generator-generator模板并使用yo generator在当前目录生成模板文件骨架,并完善其生命周期方法。

第一步,package.json

开发一个Yeoman-generator,我们要做的第一步就是配置package.json。有几个关键的地方,一个是,name的值的格式必须是"generator-"前缀 + Yeoman-generators官方源列表上的唯一值(如果你要共享你的generator到官方generator源的话);第二个就是,keywords属性必须包括"yeoman-generator"这个值;第三,files属性是命令自定义文件,app是默认的命令;第四,必须要安装最新版本的yeoman-generator依赖,可以直接运行:npm install --save yeoman-generator 获取最新的版本号。详细的package.json可以看下面这份:

{
  "name": "generator-simple-dir",
  "version": "0.0.1",
  "description": "A very simple template generator",
  "files": [
    "generators/app",
    "generators/comp",
    "generators/page"
  ],
  "author": "橙乡果汁",
  "license": "MIT",
  "keywords": [
    "yeoman-generator"
  ],
  "repository": {
    "type": "git",
    "url": "git@github.com:hugzh/generator-simple-dir.git"
  },
  "bugs": {
    "url": "https://github.com/hugzh/generator-simple-dir/issues"
  },
  "dependencies": {
    "glob": "^7.1.0",
    "mkdirp": "^0.5.1",
    "yeoman-generator": "^0.24.1"
  }
}

对应的src目录格式应该是这样的:

├───package.json
└───generators/
├───app/
│ └───index.js
├───comp/
│ └───index.js
└───page/
└───index.js

你也可以直接把files属性直接写成:

"files": [
  "app",
  "comp",
  "page"
]

但是这样的话,你的代码根目录就必须直接包含app,comp和page文件夹。

本文由金沙官网线上发布于Web前端,转载请注明出处:基于yeoman定制的交互式命令行脚手架【金沙官网

您可能还会对下面的文章感兴趣: