Yeoman 官网教学案例:使用 Yeoman 构建 WebApp

STEP 1:设置开发环境

与 Yeoman 的所有交互都是通过命令行。Mac 系统使用 terminal.app,Linux 系统使用 shell,windows 系统可以使用 cmder/PowerShell/cmd.exe。

1.1 安装条件

安装yeoman之前,你需要先安装如下内容

  • Nodejs v4 或者更高版本
  • npm
  • git

通过以下命令检查是否安装 Node 环境以及 npm 管理工具。

$ node -v && npm -v

npm 默认随 Node 一起安装。有些 Node 版本可能安装的是旧版本的 npm,你可以通过以下命令更新 npm

$ npm install -g [email protected]

通过以下命名检查是否安装git

$ git --version

1.2 安装yeoman工具箱

如果已经安装了 node 环境,可以通过以下命令安装 Yeoman

$ npm install -g yo

1.3 确认安装

首先确认 Yeoman 是否正确安装

$ yo --version

STEP 2:安装Yeoman生成器

在传统的 web开发中,你需要花大量时间为你的 webapp 设置模板代码、下载依赖包以及手动创建文件目录结构。Yeoman 的生成器会帮你搞定这一切。让我为 FountainJS 项目安装一个生成器。

2.1安装生成器

你可以通过 npm 命令安装 Yeoman 生成器,目前可用的生成器超过了 3500 个,大多数都是开源社区贡献的。

通过以下命令安装 generator-fountain-webapp

$ npm install -g generator-fountain-webapp

该命令将安装生成器所需的node包。

和使用 npm install 一样,你可以通过 Yeoman 的交互菜单搜索 generators。

运行 yo 然后选择 Install a generator 来搜索发布的生成器。

STEP 3:使用生成器搭建我们的app

我们已经使用多次“脚手架”这个词,但是你可能还不知道它是什么意思。在 Yeoman的 语境中,脚手架材料表示通过一些配置为你的 webapp 生成文件。在这一步中,你会看到 Yeoman 如何为你喜欢的库及框架生成文件,以及使用如 webpack/babel/Sass 等一些额外的库的配置。

3.1 创建项目文件夹

创建 mytodo 文件夹

$ mkdir mytodo && cd mytodo

生成器生成的脚手架文件会放在这个文件夹中。

3.2 通过 Yeoman 菜单使用生成器

再次运行 yo

$ yo

如果你已经安装了多个 generator,你需要从中选择一个。选中 Fountain Webapp,按回车 enter 运行生成器。

3.3 配置生成器

为了加快开发环境的初始化设置,有些生成器也会提供选项来自定义你的app的基础开发库。

FountainJS 生成器提供一些选项来匹配你的喜好。

  • 框架(React,Angular2,Angular1)
  • 模块管理工具(Webpack,SystemJS,none with bower)
  • JavaScript预处理器(babel,TypeScript,none)
  • css 预处理器(Sass,Less,none)
  • 三个模板app(a landing page,hello world,TodoMVC)

在该案例中,我们会使用 ReactWebpackBabelSASSRedux TodoMVC 模板。

方向键选择,回车键确认。

Yeoman 会自动搭建你的 app,获取依赖包。几分钟之后我们将进行下一步。

STEP 4:查看Yeoman生产的app的目录结构

打开你的 mytodo

目录,看一下脚手架搭建了什么。应该如下图所示:

在 mytodo 文件夹中,我们有:

src: web应用的父目录

  • app:React+Redux的代码
  • index.html:基础html文件
  • index.js:TodoMVC app 的入口文件

conf:配置文件及第三方工具的父目录(Bowersync,Webpack,Gulp,karma)

gulp_tasks 和  gulpfile.js:构建任务

.babelrcpackage.jsonnode_modules:配置以及所需依赖包

.gitattributes  和 .gitignore:git的配置

STEP 5:在浏览器中预览你的app

如果想要在你喜欢的浏览器上预览你的 web app,你无须在电脑上做任何事情来设置本地服务器。这些都是 Yeoman 所做的一部分。

5.1 打开服务器

运行 npm 脚本,创建在 localhost:3000 (或者127.0.0.1:3000) 上预览的基于 node 的本地 http 服务器。

$ npm run serve

在浏览器的新页面打开localhost:3000

5.2 停止服务器

如果你想停止服务器,按 Ctrl + C 停止当前CLI的进程

注意:你不能在同一端口运行多个http服务器(默认3000)

5.3 查看你的文件

打开你喜欢的文本编辑器开始做点改变。每一次改变都会强制浏览器刷新而不需要你亲自操作。这种方式叫做即时加载(live reloading),可以实时查看app状态。

即时加载的功能是通过配置 gulpfile.js 中的 gulp tasks 以及 gulp_tasks/browsersync.js 中的 Browsersync 实现的。它会监测你的文件的变化然后自动加载。

如下,我们编辑 src/app/components 路径下的 Header.js

修改立即生效

STEP 6:使用karma和jasmine测试

有些人可能不熟悉Karma,它是不依赖于框架的测试运行器。Fountainjs 生成器中已经包含 jasmine 测试框架。。。。

6.1 运行测试单元

让我们返回命令行按 Ctrl+C 停止本地服务器。package.json 中已经有了运行测试单元的 npm 脚本。可以如下运行

$ npm test

每一个测试都应该通过.

6.2 升级单元测试

你可以在 src 文件夹中找到单元测试脚本,打开 src/app/reducers/todos.spec.js 。这是为 Todos reducers 编写的单元测试。举个例子,我们看一下验证初始状态的第一个测试。

it(‘should handle initial state‘, () => {
  expect(
    todos(undefined, {})
  ).toEqual([
    {
      text: ‘Use Redux‘,
      completed: false,
      id: 0
    }
  ]);
});

按如下修改

it(‘should handle initial state‘, () => {
  expect(
    todos(undefined, {})
  ).toEqual([
    {
      text: ‘Use Yeoman‘, // <=== here
      completed: false,
      id: 0
    }
  ]);
});

重新运行 npm test,可以看到如下错误

if you want run test automatically on change you can use npm run test:auto instead

打开 src/app/reducers/todos.js

把初始状态改成

const initialState = [
  {
    text: ‘Use Yeoman‘,
    completed: false,
    id: 0
  }
];

你成功修复了测试

如果你的 app 越来越大或者更多的开发者参与进来,编写单元测试可以更容易的发现 bug。

STEP 7:使用 Local Storage 永久保存 todos

让我们重新看一下当刷新浏览器时 React/Redux mytodo 不能保存的问题。

7.1 安装 npm 包

为了轻松解决这个问题,我们可以使用另一个Redux模块“redux-localstorage”,它可以快速执行local storage

运行以下命令

$ npm install --save [email protected]

7.2 使用redux-localstorage

Redux 需要配置才能使用,将 src/app/store/configureStore.js 修改如下

import {compose, createStore} from ‘redux‘;
import rootReducer from ‘../reducers‘;

import persistState, {mergePersistedState} from ‘redux-localstorage‘;
import adapter from ‘redux-localstorage/lib/adapters/localStorage‘;

export default function configureStore(initialState) {
  const reducer = compose(
    mergePersistedState()
  )(rootReducer, initialState);

  const storage = adapter(window.localStorage);

  const createPersistentStore = compose(
    persistState(storage, ‘state‘)
  )(createStore);

  const store = createPersistentStore(reducer);
  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept(‘../reducers‘, () => {
      const nextReducer = require(‘../reducers‘).default;
      store.replaceReducer(nextReducer);
    });
  }

  return store;
}

如果你浏览器中查看应用程序,你会在待办事项列表看到一项“Use Yeoman”。

应用程序初始化时,如果本地存储是空的,则列表中不会有事项。

继续前进,并添加一些项目到列表中:

现在当我们刷新浏览器列表项依然存在。万岁!

我们可以确认一下数据是否保存在本地存储中,打开chrome浏览器的检查工具,产看 Resources 面板,从左边栏选择 Local Storage

STEP 8:为生产做准备

准备好把你 todo 应用程序展示给世界了吗?让我们尝试建立一个准备生产的版本。

8.1 优化产品文件

为了创建应用程序的生产版本,我们需要

  • lint 代码
  • 合并和缩小我们的脚本及样式来拯救那些网络请求,
  • 编译预处理器的输出结果,
  • 使应用程序更精炼

哇!令人惊讶的是,所有运行都可以通过:

$ npm run build

你的准备就绪的应用程序在 mytodo 项目的 dist 目录下,你可以使用FTP发布到服务器。

8.2 建立及预览生产的应用程序

如果想在本地预览 app,可以运行下面的 npm 脚本

$ npm run serve:dist

它会创建你的项目并且启动本地服务器。

时间: 2024-10-12 12:58:19

Yeoman 官网教学案例:使用 Yeoman 构建 WebApp的相关文章

我要上官网,上云案例征集活动启动啦! 提交案例,得大奖!【阿里云】

云产品是什么,公司业务需要上云吗,怎么上云?大量用户对上云不了解,怎么办? 看同行业别人怎么上云的!不同行业不同发展阶段的上云案例库将助力千千万万企业和个人0门槛的轻松上云! 云栖号 正式面向全网发起: 阿里云上云案例嘉年华(第一季)- 面向全网收集优质的上云案例和最佳实践. 奖品超出你的想象!顶级流量曝光:阿里云大礼包:云栖号案例库专属证书! 让你的案例千万人看得到! 上云案例和最佳实践是什么? 上云案例: 你上云的那些故事和经历,内容需包括:基本介绍(公司/个人名称及简介),为什么要上云(业

如果你想为您的公司制作(修改)一个企业官网,那么请先看看这篇文章

一个企业网站有什么功能?,为什么要为自己的企业做自己的官网! 1.企业宣传作用,(似乎是废话) 2.在线交易作用. 事实上,给你的网站接入企业支付宝,微信支付等.可以达到实时交易的功能,但很多网站都忽视了这点. 3.资料下载 我们完全可以将企业的一些共享资料,比如合同模版,产品资料放到企业官网供客户下载,但同样,对于很多企业都完全忽视了这点. 4.在线客服作用. 将自己的官网加入一些在线客服软件,比如 CC客服,53客服等,可以实时的跟访问到您官网的用户进行沟通.常见的有医院官网,几乎所有的医院

FineBI学习系列之FineBI官网提供的程序数据集(图文详解)

不多说,直接上干货! 这是来自FineBI官网提供的帮助文档 http://help.finebi.com/http://help.finebi.com/doc-view-31.html 目录: 1.描述 2.实现原理 3.案例 1.描述 由上一节BI可能通过设计器远程服务器的方式,以服务器数据集的形式来连接数据. 这样其数据来源可以是数据库数据,还可以是其它任何类型的数据,因为BI是通过AbstractTableData抽象类来读取数据源的,而上述所有的数据来源都继承实现其抽象方法,因此BI可

java官网门户源码 SSM框架 自适应-响应式 freemarker 静态模版引擎

来源:http://www.fhadmin.org/webnewsdetail3.html 前台:支持(5+1[时尚单页风格])六套模版,可以在后台切换 官网:www.fhadmin.org 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问速度快,轻便,对服务器负担小 3.网站前端采用主流的响应式布局,同一页面同时支持PC.平板.手机(三合一)浏览器访问 4.springmvc +sp

【Spark深入学习 -16】官网学习SparkSQL

----本节内容-------1.概览        1.1 Spark SQL        1.2 DatSets和DataFrame2.动手干活        2.1 契入点:SparkSession        2.2 创建DataFrames        2.3 非强类型结果集操作        2.4 程序化执行SQL查询        2.5 全局临时视图        2.6 创建DataSets        2.7 与RDD交互操作        2.8 聚集函数3.Sp

Oracle官网JNI简介和接口函数分析

第一章 概述 本章主要介绍JNI(Java Native Interface),JNI是一种本地编程接口.它允许运行在JAVA虚拟机中的JAVA代码和用其他编程语言,诸如C语言.C++.汇编,写的应用和库之间的交互操作. JNI的最大优势在于没有强加任何限制在JAVA虚拟机的下层实现上,因此,JAVA虚拟机供应商能够提供JNI的支持而不影响虚拟机的其他部分,程序员只需写出一个版本的本地应用和库,就可使之运行在一切支持JNI的JAVA虚拟机上. 本章包含了以下的要点: ? JNI概述 ? 目标 ?

android測试工具MonkeyRunner--google官网翻译

近期在复习之前的笔记,在回想MonkeyRunner时看了看google官网的内容,写得不错.就翻译出来分享下.事实上google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供了一个API用于在Android代码之外控制Android设备和模拟器.通过MonkeyRunner.您能够写出一个Python程序去安装一个Android应用程序或測试包.执行它,向它发送模拟击键.截取它的用户界面图片.并将截图存储于工作站上.monkeyrunner工具的主要设计目的是用于測试功

AR入门系列-在vuforia官网的使用-01-史上最详细AR入门教程

使用高通的vuforiaSDK 网址:https://developer.vuforia.com/ 我们想要使用vuforia首先得注册一个账号 网站会发送邮件给你的邮箱 点击验证链接,验证邮箱 出现此信息代表验证成功,即可登录 登录成功后即可下载SDK,可以根据你的需要下载,建议下载最新版,这里我使用unity3d作为开发工具 使用vuforia需要授权的许可证,所以这里我们首先创建一个许可证 这里我们选择开发版,vuforia对开发版免费,其他收费可见Pricing 起一个项目的名字 同意协

spring jar包、文档官网下载

一.spring的官方网址:http://spring.io/ 二.看到这个简洁清新的界面,导航很明确,进入projects whatever the infrastructure needs of your application may be, there is a Spring Project to help you build it. spring的涵盖面是很宽广的,你需要什么可以在上图所示的页面中查找,本页很清晰,很容易找到spring framework, 还有一段英文介绍provi