FEZ前端模块化工程开发框架

时间 2019-11-17

标签 fez 前端模块化工程开发框架繁體版

原文原文链接

FEZ

FEZ 是面向前端模块化工程的开发框架。主要目的是统一前端开发模式和项目开发结构，自动化前端工做流，提升开发效率和开发质量。使用持续集成等软件工程的架构模式，集成众多业界先进的解决方案，让研发人员更专一于业务逻辑的实现。核心包括功能模块化、结构规范化、及开发自动化。css

FEZ倡导的前端开发理念

采用响应式界面布局，一份代码各类终端设备兼容，自动适配PC端、手机端、PAD端、及各类大小的屏幕，并能够嵌入任何APP中使用。为产品的多元化几何倍的提升开发效率，极大下降多平台项目的开发成本。
模块化/组件化开发，将复杂的系统细分为模块，分治管理，并有统一的文件结构，兼顾模块的通用和复用原则，极大提升项目的功能扩展和可维护性。
积木式、组件化快速构建页面，使用API接口/Mock数据先后端分离、并在流程上让设计、前端、后端、测试团队并行工做，极大提升团队研发效率。
使用国际前沿的工程自动化技术解决项目复杂的资源管理和大量重复的代码编译工做。

FEZ使用场景

【一份代码支持多终端响应式WEB应用】参考示例：fez-demo-handlebars
【基于Vue的高性能大中型WEB应用】参考示例：fez-demo-vue
【基于React的高性能大中型WEB应用】参考示例：fez-demo-react
【高性能移动端混合APP及H5应用】参考示例：fez-demo-framework7
【快速构建中小型官方网站、活动、专题、宣传页面】参考示例：fez-demo-75team fez-web
【网页中显示艺术/特殊字体的官网网站、活动专题】参考示例：fez-demo-fontmin

FEZ核心特性

功能模块化

FEZ 支持使用ES6 Module来组织前端代码，支持使用ES5/ES6/ES7等标准特性开发项目，经过Babel编译完美运行在浏览器中。能够整合如Vue、React等MVVM框架实现单文件组件形式的高效开发体验。html

模块化是一种处理复杂系统分解为更好的可管理模块的方式。每一个模块完成一个特定的子功能，全部的模块再进行统一的拼装和加载，成为一个总体，完成整个系统所要求的功能。有关模块化的更多知识请参考：【github.com/fouber/blog】【www.zhihu.com/question/37…】前端

结构规范化

FEZ 将复杂的系统划分为功能页面(组件)，将复杂的页面(组件)划分为若干个模块，将模块分为：获取数据、渲染显示、交互操做，而且都有统一的文件结构。vue

统一的项目开发结构node

.
├── fez.config.js
├── gulpfile.babel.js
├── package.json
└── src
    ├── lib
    ├── static
    │   ├── fonts
    │   ├── images
    │   └── styles
    │       ├── page1.scss
    │       └── page2.scss
    └── views
        ├── page1
        │   ├── index.html
        │   ├── index.js
        │   ├── service.js
        │   └── module
        │         ├── mod1
        │         │    └── index.js
        │         └── mod2
        │              └── index.js
        ├── page2
        │   ├── index.html
        │   ├── index.js
        │   └── module
        │         ├── mod1
        │         │    ├── index.js
        │         │    └── service.js
        │         └── mod2
        │              └── index.js
        │              └── service.js
        └── public
            ├── module
            └── utils

复制代码

开发自动化

FEZ 集成了大量自动化前端工做流。任何机械的重复性的工做都应该交给 FEZ 来完成。react

自动化搭建本地研发环境，快速响应文件更改并自动刷新浏览器。
自动化同步浏览器中滚动页面、点击等行为到其余浏览器和设备中。
自动化编译ES6/ES7或CommonJS标准的JS代码，并生成source map便于浏览器端调试。
自动化编译Sass/Less/Stylus => CSS文件。
自动化使用Autoprefixer添加CSS3的各类浏览器前缀。
自动化处理第三方框架库JS脚本、CSS样式、Font字体等并自动化插入到页面。
自动化根据配置合并前端JS、CSS文件。
自动化压缩JS、CSS、HTML、图片、字体等静态资源。
自动化Svg转Icon图标、雪碧图合成、移动端高清@2x图片适配，并自动化生成对应样式。
自动化Svg图标合并、自动化使用symbol形式引入页面。
自动化转换全部CSS样式中的PX单位为REM单位。
自动化转换全部图片为WebP格式并生成对应样式文件。
自动化注入WebP浏览器支持检测脚本并替换全部的WebP文件。
自动化生成全部静态资源的MD5版本号。
自动化添加全部静态资源添加CDN地址。
自动化搭建用于测试上线代码的多终端测试环境。
自动化经过SFTP部署上线、或部署静态资源。
自动化经过Mock方式构建随机数据，模拟研发和上线的数据环境。
自动化建立统一结构化项目、及统一结构化的项目页面。
自动化转换TTF为网页字体(eot,svg,ttf,woff,woff2)并生成font-face样式文件。
自动化深度无损压缩PNG/JPG/JPEG图片。

FEZ安装使用

Mac系统推荐使用 iterm2 及 oh my zsh
类 Unix 系统，请打开任意终端输入命令执行。
Windows 用户请先安装 git，而后在 Git Bash 下执行命令

安装

1. 安装 Node 和 NPMwebpack

详细过程参考官网 https://nodejs.org (中文网站 http://nodejs.cn/)
Node >= 5.10，建议使用最新稳定版(LTS)。
Ubuntu 用户使用 apt-get 安装 node 后，安装的程序名叫 nodejs，须要软链成 node。
Windows 用户安装完成后须要在 CMD 下确认是否能执行 node 和 npm。

FEZ不能保证全部 window系统下默认的 Nodejs 环境都能正常运行。能够尝试安装nodejs的windows开发工具集git

2. 全局安装 Gulp4.0es6

任意目录执行github

npm install gulp@next -g
复制代码

详情请参考 Github 社区 Gulp

目前Gulp发行版本是3.9.1，若是安装过全局的非4.0版本 gulp 请先卸载 npm uninstall gulp -g

3. 全局安装 Bower (可选安装)

任意目录执行

npm install bower -g
复制代码

使用Bower主要是为了方便管理基于浏览器的第三方框架库，经过页面自动化注入技术解决页面框架库的引入和管理问题，若是您使用node_module资源、或用固定的CDN资源、或手动在页面引入第三方框架库，能够选择不安装。

下载FEZ工程框架

使用Git下载(推荐)

git clone git@github.com:furic-zhao/fez.git
复制代码

使用浏览器下载

将https://github.com/furic-zhao/fez/archive/master.zip下载解压到任意目录。

使用FEZ工程框架

1. 安装FEZ的NPM依赖包（在FEZ工程目录执行）

npm install
复制代码

2. 建立项目 （在 FEZ 工程目录执行）

gulp project --dir=demozhj
复制代码

在FEZ工程目录下会自动建立结构化的 demozhj 项目

demozhj
├── fez.config.js            /／ FEZ功能配置文件
├── package.json             /／ 项目npm配置文件
├── gulpfile.babel.js        /／ gulp入口文件
└── src                      /／ 源码目录
    ├── lib                  /／ JS公共库文件目录
    ├── static               /／ 静态资源目录
    │   ├── fonts            /／ 字体目录
    │   ├── images           /／ 图片目录
    │   └── styles           /／ 样式目录
    │       └── index.scss   /／ 首页样式文件
    └── views                /／ 业务逻辑存放目录
        ├── index            /／ 首页目录
        │   ├── index.html   /／ 首页Html文件
        │   ├── index.js     /／ 首页业务逻辑脚本文件
        │   └── module       /／ 首页模块目录
        └── public           /／ 业务逻辑公共文件目录
            ├── module       /／ 公共模块目录
            └── utils        /／ 公共工具类库目录
复制代码

建立项目会默认建立index页面。

3. 运行项目

进入 demozhj 项目目录执行

gulp
复制代码

FEZ 会自动打开默认浏览器进入研发环境，项目任意文件的更改都会自动刷新浏览器，请尽情享用FEZ为你带来的愉悦开发体验！

命令说明

gulp
复制代码

FEZ 会自动打开系统默认浏览器进入研发环境，您能够打开多个不一样终端和不一样类型的浏览器访问同一开发页面，开发过程当中任何文件的更改，或是在任何一个终端的浏览器中的操做行为，都会同步到每一个终端界面，实时查看在每一个终端的修改效果。

gulp dist
复制代码

FEZ 会自动化编译源码目录中的全部文件(js、sass、less、html、图片、字体等)，自动化生成md5版本号，并将编译后的上线代码发布到dist目录。以后经过其它途径、或流程工具发布dist目录到线上服务器。

本地测试上线代码（在项目目录执行）

gulp test
复制代码

FEZ 会自动化构建本地测试环境，并自动打开系统默认浏览器对dist上线目录中的代码真实性的模拟服务器上的操做效果，可让测试人员打开多个不一样终端和不一样类型的浏览器一次性测试全部平台、全部浏览器中的最终产品的交互和操做。

gulp sftp
复制代码

FEZ 会调用项目目录中fez.config.js的sftp配置信息，经过SSH方式快速部署dist 中的上线代码，或是部署dist目录中的静态资源。

gulp zip
复制代码

FEZ 会自动化将dist目录中全部上线代码打包成dist.zip文件，用于经过其它流程工具部署上线。

svg => icon 转换（在项目目录执行）

gulp svg2icon
复制代码

FEZ 会调用项目目录中fez.config.js的svgIcons配置信息，自动化转换svg图标为icon字体文件并生成对应的样式文件。

gulp sprite
复制代码

FEZ 会调用项目目录中fez.config.js的sprites配置信息，自动化合并slice目录中的小图标为雪碧图并生成sprite.png图片到images/sprite／目录，同时生成对应的样式文件(可配置生成css/less/sass/scss)到styles/sprite/目录

建立结构化模版页（在项目目录执行）

gulp page --dir=demopage
复制代码

demopage 页面结构

.
└── src
    ├── static
    │   └── styles
    │       └── demopage.scss  /／ demopage 页面样式文件
    └── views
        └── demopage           /／ demopage 页面目录
            ├── index.html     /／ demopage HTML页面
            ├── index.js       /／ demopage 业务逻辑脚本文件
            └── module         /／ demopage 模块目录
复制代码

gulp fontmin
复制代码

FEZ 会调用项目目录中fez.config.js的minfonts设置的网页中要显示的文本信息，将src/static/ttf/目录中存放的普通大文件ttf字体生成网页字体(eot,svg,ttf,woff,woff2)，并将生成后的小文件网页字体格式存放在src/static/fonts/目录下，同时生成对应的@font-face样式文件(css,less,sass,scss)，可在页面样式中直接引用。FEZ让你在网页中大量的使用特殊字体成为可能，请尽情发挥设计师的想象力。