手把手教你用Yeoman构建Web应用

2019 年 1 月 04 日

手把手教你用Yeoman构建Web应用

Yeoman是一种高效、开源的Web应用脚手架搭建系统,意在精简开发过程。Yeoman因其专注于提供脚手架功能而声誉鹊起,它支持使用各种不同的工具和接口协同优化项目的生成。


本文要点


  • Yeoman提供了一种灵活创建、开发、编译和调试Web应用的脚手架(scaffolding)软件。

  • 虽然Yeoman本身是JavaScript编写的,但适用于任何语言编写的应用。

  • Yeoman支持与Webpack、Babel、TypeScript、React和Angular等多种第三方软件库的无缝集成。

  • Yeoman内建立有一个基于Node.js的HTTP开发服务器,简化了开发环境的设置和开发过程的迭代。

  • Yeoman实现构建过程由开发环境到优化后生产环境间的无缝转移。


Yeoman最初发布于 2012 年,它是一款高效、开源的 Web 应用脚手架(scaffolding)软件,意在精简软件的开发过程。脚手架软件用于实现项目中多种不同的工具和接口的协同使用,优化项目的生成过程。Yeoman 因其专注于提供脚手架功能而声誉鹊起,项目开源发布在GitHub上。



Yeoman 的基础知识


Yeoman 的使用体验可分为三个层次,各层间无缝协作,均为独立开发,并可单独运行。在第一层上,Yeoman 提供了命令行实用表单程序“Yo”。Yo 与 Yeoman 一起使用,提供 Yeoman 软件平台的基线。在第二层中,Yeoman 包括了应用构建器“Grunt”和“Gulp”,帮助实现应用开发的自动化。Yeoman 软件第三层的特点在于使用了软件包管理器“npm”,管理后端和前端开发的代码包及其依赖关系,由此为应用开发提供便利。Yeoman 为开发人员提供了多种结合开发过程使用的特性。


Yo


Yo 担当着“胶水”的作用,将应用粘合在一起的。Yo 可在 macOS、Windows 和 Linux 等多种不同操作系统上使用。从设计上看,Yo 通过 Gruntfile 与开发人员选取的生成器(generator)协同工作,创建 Web 应用的基线。通过使用 Yo,可理解 Yeoman 的工作机制。


对比 Grunt 与 Gulp


Grunt 提供了开发的自动化,由此成为 Yeoman 的重要创新组成部分。Grunt 和 Gulp 插件的安装和管理,均通过 Node.js 的软件包管理器 npm。作为一种任务运行器,Grunt 最大限度上简化了开发人员的工作。Grunt 构建系统可用于项目的构建、预览和测试。一些重复性任务,包括编译、缩减( minification)、检查(linting)和测试等,均可交由 Grunt 执行。Grunt 将开发团队从应用开发的琐碎工作(nitty gritty)中解放出来,这意味着开发人员可以专注于应用所独有的一些重要、复杂之处。尤其是,Grunt 可以执行编译、代码检查、单元测试和压缩等基本任务,简化了开发人员的工作。一些著名企业,包括沃尔玛和Wordpress等,均已使用了 Grunt。


Grunt 还支持使用插件定制应用,其具有数以百计的可用插件,支持执行多种任务。例如,开发人员可使用 cc-templates-generator 插件基于组件生成模板,在需要并发运行 Grunt 任务时使用一些并发插件。但有必要指出,如果现有的插件并不能满足开发人员的需求,那么他们可以通过grunt-init在 Grunt 上创建自己的插件,然后发布到数据库中以供他人使用。所创建的内容和文件,取决于开发人员选取的具体模板。


Gulp 非常类似于 Grunt,也是一种开发人员构建应用的自动任务运行器。从设计上看,Gulp 支持使用多种插件完成每个任务,而 Grunt 则是使用可同时完成多种任务的插件。此外,Gulp 的性能也要显著地快。例如,Grunt 执行一次 Sass 编译的用时 2.348 秒,而 Gulp 仅需要 1.27 秒。Gulp 的性能优势在于它使用了 Node 流,这意味着 Gulp 无需在磁盘上写入中间文件。


开发团队在 Grunt 或 Gulp 两者间做出选择时,应考虑的是应用的具体需求。


npm


npm 是一种软件包管理器,提供特性组和打包的代码,支持开发人员简化和自定义应用。通常,可用的代码是通过由 npm“托管”的代码库提供,其中包括 jQuery,React 和 Angular 等。从应用架构的角度看,开发人员可使用 npm 选取应用开发所需的代码。npm 的另一个特性类似于 Grunt,如果 npm 平台提供的代码或软件包无法满足开发人员的需求,那么他们可以创建自己的软件包,并与他人共享。该做法适用于所有的开源软件。


Yeoman 的优点


  • Yeoman的流程中整合了多种新手特性,支持新入门的开发人员轻松进行Web应用开发,同时也简化了专业人员的工作。

  • Yeoman可用于开发任何类型的Web应用。对于潜在的开发人员而言,它提供了极大的自由度。

  • 该软件非常人性化。即使是十分缺乏经验的开发人员也可以使用,由此也成为Web应用开发的一种绝佳选择。

  • 该软件还提供了一些构建应用的自动化流程。对于无论具有何种经验水平的各类开发人员而言,精简复杂的开发过程无疑都是一件好事。

  • 在提供脚手架功能外,Yeoman还为Web应用开发的其它部分提供了工具。例如,调试所用的代码。开发人员可以使用Chrome Devtools,或者任何使得顺手的IDE。Yeoman生成器还提供调试模式,可记录相关日志。这意味着Yeoman可以满足开发人员的各种需求,不必使用大量的软件平台即可创建完美的应用。

  • Yeoman支持使用任何编程语言创建应用,包括Java和C#。对于希望或需要实现应用开发多样化的开发人员,该多语言软件提供的多功能性是非常有用的。

  • Yeoman集成了多种生成器。这些生成器作为Yeoman开发过程的“插件”,为Yeoman用户提供了多种选项。在搭建脚手架中,支持使用不同的生成器。例如,开发人员可通过使用各种生成器间的协调和协作来“支撑”自身的项目。在项目定制和开发之前,开发人员还可以考虑将生成器作为项目的准系统。一些热门的生成器包括:

  • Backbone.js:提供Web应用处理数据、视图、事件、REST API等的结构和公共基础。

  • AngularJS:广为使用且十分流行的JavaScript框架,可提供模型支撑、视图路由等功能。该生成器中还包括了sun-generator,实现控制器、指令、服务、提供者(provider),装饰器(decorator)等其他功能。

  • Bootstrap生成器:一种流行的CSS框架,通过提供超高效实现简化项目开发。它为Bootstrap项目提供四种起始选项:CSS、LESS、SASS和Stylus。生成器根据开发人员的选择,将所选框架下载到项目的bower组件中。

  • JHipster生成器:用于开发和部署Spring Boot和Angular/React Web应用。

  • Hyperledger-composer:使用Hyperledger Composer业务网络定义作为输入,创建和编写新应用程序相关的工件。

  • Yeoman是开源的。 这意味着用户可从软件开发的自由市场中受益。一旦需要汇集英才创建最佳、最优化的系统,用户就能够受益于这些最优秀的开发人员。


Yeoman 的不足之处


  • Yeoman支持使用任何编程语言并为业余开发者提供服务,这意味着对于那些经验丰富的开发人员而言,他们希望的是在提供高级开发选项的同时尽可能地简化和定制流程,由此Yeoman可能并非最佳的系统。在他们看来,Yeoman的平台可能过于通用。

  • 与上一点相关,一些开发人员可能会发现,由于Yeoman的生成器设置,他们花费了过多时间在定制和测试生成器上,而不是工作于实际的应用开发。

  • Yeoman另一个饱受批评之处是需要开发人员紧跟发展。对于开发人员而言,重要的是确保他们不断拥有最新的程序、生成器及其它工具,以生产最好的产品。因此,项目或应用是永远不会真正完成的,最佳实践也是不断变化的。为了保持竞争力,开发人员必须亦步亦趋。


Yeoman 具有清晰的 API,这对于那些刚着手或想要尝试构建应用的用户是一个很好的特性。 此外,Yeoman 还可自动执行一些常见的任务,有助于开发人员改进工作流程。


尽管 Yeoman 尚存在一些缺陷,但其背后具有一个不断增长的社区,并且开发人员也正在其工作流程集成 Yeoman,实现持续集成、版本控制等,从而使构建应用对每位开发人员而言不再那么令人生畏和耗时。Yeoman 还支持多种选择,例如 Grunt、Gulp 和 npm,确保开发人员所具有的软件组合最符合团队对 Web 应用程序开发过程的期望。


为进一步了解 Yeoman 的相关信息,下面我们将通过给出一个如何使用 Yeoman 创建示例应用,介绍构建的过程。该特定示例是 TodoMVC 的一个实现。


第一步:设置开发环境


开发人员主要通过命令行与 Yeoman 进行交互。


在安装 Fountain Webapp Generator 之前,确保系统中安装了下列环境:


  • Node.js 6或以上版本;

  • npm 3或以上版本;

  • Git;

  • Yeoman工具集。


如果出现访问许可或权限问题,可参考操作指南


第二步:安装 Yeoman 生成器


安装用于 FountainJS 项目的生成器,可减少用于设置样板文件(boilerplate)代码和文件夹结构的时间。使用 npm 安装 generator-fountain-webapp,命令为 npm install --global generator-fountain-webapp。


此外,还可使用 Yeoman 的交互菜单搜索其它生成器。运行 yo 命令,选择“install a generator”选项,然后继续搜索其它已发布的生成器。


第三步:使用生成器搭建应用的脚手架


该步骤展示 Yeoman 如何生成开发人员选定的软件库和框架。此外,还有选项支持使用一些外部软件库,例如WebpackBabelSass


首先,创建项目文件夹。运行命令 mkdir mytodo 和 cd mytodo,为项目创建 mytodo 文件夹。生成器将使用此文件夹放置生成的项目脚手架文件。


现在,运行 yo,并通过 Yeoman 菜单访问生成器。开发人员可能已安装了多个生成器,对于此例需选定 Fountain Webapp 并点击回车键。


一些生成器提供了额外的功能,使用开发人员软件库定制应用。着手配置生成器,加速开发环境的设置。


下面列出使用的一些 FountainJS 生成器选项:



对于本例,箭头选择 SaSSReactBabelWebpack Redux TodoMVC 并回车。Yeoman 会自动为应用建立脚手架,并管理依赖关系。


第四步:检查 Yeoman 生成的应用目录结构


查看 mytodo 目录中脚手架生成的内容。其中可看到:


  • src

  • app

  • index.html

  • index.js

  • conf

  • gulp_tasks

  • gulpfile.js

  • .babelrc

  • package.json

  • node_modules

  • .gitattributes

  • .gitignore


在所有生成和安装完成后,会初始化一个新的 git 代码库。使用 git add --all 和 git commit -m 'First commit’命令添加首个提交,保存当前状态。


第五步:在浏览器中预览应用


运行 npm 脚本,创建一个基于 Node 的本地 HTTP 服务器,命令为 npm run serve。该服务器将在 localhost:3000 端口(在一些配置下是 127.0.0.1:3000)提供服务。以 localhost:3000 打开一个新的浏览器页面。


(注意:要停止服务器运行并退出 CLI 过程,使用 Ctrl+C 键盘命令。)


打开常用的文本编辑器查看文件,并可做出更改。在每次保存编辑后,浏览器将强制自动刷新,该功能称为“现场重载”(live reloading)。要实现该功能,需要在 gulpfile.js 中配置 Gulp 任务,在 gulp_tasks/browsersync.js 中配置Browsersync


第六步:使用 Karma 和 Jasmine 测试


Karma是一种测试框架不可知性的 JavaScript 测试运行器。Jasmine测试框架已经包含在本例中所使用的 FountainJS 生成器中。前面运行的 yo fountain-webapp,在 mytodo 目录中生成了模式为*.spec.js 的脚手架文件,并创建了 conf/karma.conf/js 文件。这为 Karma 提供了 Node 模块。


回到命令行,使用 Ctrl+C 杀掉本地服务器。使用 package.json 中的脚手架 npm 脚本运行单元测试。运行 npm test 初始化测试。


在 src 目录中打开 src/app/reducers/todos.spec.js,可看到脚手架的单元测试。


第七步:准备用于生产环境


首先,通过优化用于生产的文件,创建应用的生产版本。运行 npm run build,精简下列过程:


  • 代码检查;

  • 脚本和风格的链接和最小化;

  • 编译预处理器的输出;

  • 尽可能精简应用。


运行 npm run build 脚本后,通过 mytodo 项目根目录中的 dist 文件夹可访问用于生产的应用。这些文件已使用开发人员熟悉的部署服务置于服务器。


最后,运行 npm run serve:dist,在本地预览生成的应用。该命令在本地 Web 服务器上构建并加载项目。


作者简介


Oscar Salas 是一位具有五年经验的 B2B 数字化市场专家,他帮助企业借助品牌策略发展和营销过程实现成长和扩张。Salas 是一位分析型思考者,爱猫人士,他喜欢弹钢琴,听齐柏林飞艇乐队。他目前牵头iTexico的 Demand Gen 战略。


查看英文原文: Building a Web App With Yeoman


2019 年 1 月 04 日 16:148096
用户头像

发布了 364 篇内容, 共 88.1 次阅读, 收获喜欢 160 次。

关注

评论

发布
暂无评论
发现更多内容

架构学习总结 - 1 - 软件设计原则

Chasedreamer

首次披露我和知识星球老吴的一段对话

池建强

产品思维 产品定位 知识星球

实践Java如何创建安全的线程池

tingye

多线程 线程池 「Java 25周年」

架构师之路-UML 入门

闻人

学习 架构设计 极客大学架构师训练营 架构总结

如何优雅的理解HBase和BigTable

Rayjun

Java HBase

软件设计原则作业

Mr.Monkey

对标腾讯T3-2:高并发+微服务+消息中间件+Redis+MySQL+Nginx

周老师

程序员 面试 cpu 多线程 高并发

极客时间 - 架构师培训 -2 期作业

Damon

面向对象设计原则

elfkingw

极客大学架构师训练营

ARTS 打卡(20.06.08-20.06.14)

小王同学

架构师训练营第二周学习总结

张明森

学习总结

Mr.Monkey

框架设计原则

架构师训练营-第一周学习总结

清风徐徐

架构师训练营-第一周作业1-食堂就餐卡系统设计

清风徐徐

极客大学架构师训练营 UML

从车辆工程转行程序员两年,我是这么走过来的

WB

转行程序员 汽车电子

设计模式原则思考

张瑞浩

设计模式

张瑞浩

gitlab-runner 安装

dudu

第二课作业

【荒于嬉】事务的特性及隔离级别

luojiahu

事务

架构师训练营-学习笔记-第二周

心在飞

极客大学架构师训练营

ARTS_20200_week1

不在调上

ARTS 打卡计划

设计模式原则

张瑞浩

【架构师训练营-周总结-2】

小动物

总结 极客大学架构师训练营

每周学习总结 - 架构师培训2期

Damon

架构师训练营-每周学习总结2

水边

极客大学架构师训练营

《微服务设计》读后感

w0807m

微服务

优秀的js拓展数学库math.js,解决精度问题

飞哥

Java mathjs

依赖倒置原则

elfkingw

架构师训练营作业(第二周)

默默

极客大学架构师训练营

手把手教你用Yeoman构建Web应用-InfoQ