手把手教你用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如何生成开发人员选定的软件库和框架。此外，还有选项支持使用一些外部软件库，例如Webpack、Babel和Sass。

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

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

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

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

• 模块管理，例如Webpack、SystemJS；
• 框架，例如React、Angular2或Angular1；
• CSS预处理器，例如SASS、LESS；
• JavaScript预处理器，例如Babel、TypeScript；
• 三个示例应用，即引导页（a landing page）、示例程序hello world和TodoMVC。

对于本例，箭头选择SaSS、React、Babel、Webpack和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