ucf-web 用友前端微应用开发框架说明文档

Yongming3457
268 阅读7分钟

ucf-web 一个专注于性能与效率的前端微应用开发框架

ucf-web 是整个框架的代号，相关资源都在本仓库内维护，形成统一框架体系。

关键特性

  • 中台前端技术收敛化、标准化
  • 三种微应用开发模式，打破铁桶一块的巨石应用
  • UI 体验一致性，基于统一设计语言之上构建标准组件体系
  • HTTP 通讯协议规范化，统一异常处理
  • 可选择的模型驱动开发模式，基于元数据之上的统一快速开发

快速上手使用

$ npm i ucf-cli -g
$ ucf-cli init
$ cd xx && npm install
$ npm run dev

快速理解生成的标准工程：

xx-webapp
├── package.json
├── ucf-apps         # 按应用模块划分的子应用模块
├── ucf-common       # 项目级公共资源：图标字体、公共业务组件、工具方法、配置文件、常量等
├── ucf-public       # 构建出的最终静态资源，可对接集成部署
└── ucf.config.js    # 项目配置文件，默认好用，无需配置

ucf-apps 下的三类微应用：

  • 单体页面，简单直接；
  • 单页应用SPA，完成功能级的相关页面；
  • 模型驱动的应用mdfApp，动态扩展。

ucf-cli

npm version

NPM

介绍

通过该工具可以快速下载初始化UCF微服务前端工程所有资源到本机开发，并且可以快速创建指定的页面、带路由页面等，功能强大、操作简单易上手。

image

image

安装

# 全局安装
$ npm install ucf-cli -g

使用

安装完成全局后使用下面命令：


# 指定名称 `ucf-custom`，将会在ucf-custom里面创建资源
$ ucf init ucf-custom

# 快速下载工程到本地，并且不会创建文件夹直接在当前运行根目录进行平铺，适合初始化git仓库使用
$ ucf init


# 快速创建基础页面包含大致UCF微服务工程结构
$ ucf new app

# 查看现有微服务工程名
$ ucf list

说明

  • 查看帮助 ucf -h
  • 查看版本 ucf -v
  • 下载工程 ucf init myweb
  • 创建模块 ucf new app
  • 查看模块 ucf list

版本

  • 1.4.0 ucf new app模板去掉container.js文件，将路由与container.js合并
  • 1.3.1 去除多语模板、调整为统一兼容模板
  • 1.3.0 更换远程脚手架工程托管平台，下载速度更快
  • 1.2.3 解决人机问答第三包包异常的问题，锁定版本号
  • 1.2.2 调整模板CDN设置、更新代码
  • 1.2.1 调整ucf init初始化工程必须输入名字，而不是直接平铺到根目录，也可以ucf init webapp直接指定工程名
  • 1.2.0 调整i18n多语的机制问题，Intl多语文件夹调整到ucf-common下
  • 1.1.1 修复没有选择多语微应用出现了Intl文件夹
  • 1.1.0 增加微应用命令ucf new app多语选项的支持
  • 1.0.7 调整微应用显示名称为 MPA , SPA
  • 1.0.6 调整微应用显示名称为 singleApp , spaApp
  • 1.0.5 在线更新最新微应用模板(仅测试)
  • 1.0.4 模板App入口修改为IndexView
  • 1.0.3 升级模板
  • 1.0.2 增加版本在线检测，有新版本会给出提示升级
  • 1.0.1 更新模板路由页面、ucf init 表示在当前根目录下平铺工程文件，适合初始化git仓库的时候
  • 1.0.0 支持远端UCF工程初始化到本地、创建微服务模块工程、模块查看、内置两种模板
  • 0.0.x 初步测试版本发布

ucf-request

网络请求库，基于 axios 封装, 旨在为开发者提供一个统一的api调用方式.

NPM version build status

支持的功能

  • url 参数自动序列化
  • post 数据提交方式简化
  • response 返回处理简化
  • api 超时支持
  • axios 的 request 和 response 拦截器(interceptors)支持
  • 统一的错误处理方式

安装

npm install ucf-request --save

使用


import request from 'ucf-request';


// 请求一个api, 没有method参数默认为get
request('/api/v1/some/api').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
});

// url参数序列化
request('/api/v1/some/api', { params: {foo: 'bar'} });

// post 数据提交简化
// 当data为object时, 默认requestType: 'json'可不写, header会自动带上 application/json
request('/api/v1/some/api', { method:'post', data: {foo: 'bar'} });

// requestType: 'form', header会自动带上 application/x-www-form-urlencoded
request('/api/v1/some/api', { method:'post', requestType: 'form', data: {foo: 'bar'} });

// reponseType: 'blob', 如何处理返回的数据, 默认情况下 text 和 json 都不用加. 如blob 或 formData 之类需要加
request('/api/v1/some/api', { reponseType: 'blob' });

// 提交其他数据, 如文本, 上传文件等, requestType不填, 手动添加对应header.
request('/api/v1/some/api', { method:'post', data: 'some data', headers: { 'Content-Type': 'multipart/form-data'} });


// 超时 单位毫秒, 但是超时后客户端虽然返回超时, 但api请求不会断开, 写操作慎用.
request('/api/v1/some/api', { timeout: 3000 });

// 使用缓存, 只有get时有效. 单位毫秒, 不加ttl默认60s, ttl=0不过期. cache key为url+params组合
request('/api/v1/some/api', { params: { hello: 'world' }, useCache: true, ttl: 10000 });

// 当服务端返回的是gbk时可用这个参数, 避免得到乱码
request('/api/v1/some/api', { charset: 'gbk' });

ucf-scripts

npm version

NPM

介绍

集成了最新的技术栈包括babel7,autoprefixer,less,postcss,webpack4、高度封装、简化配置、无多余依赖、具有服务启动、开发调试、代理访问、数据模拟、构建资源、自动刷新功能。快速开发UCF微服务工程底层配套工具支撑。

安装

工具可以依赖UCF项目工程通过scripts运行

使用

  1. 通过npm scripts启动

# 开发启动
$ npm start

# 开发构建
$ npm run build

内置已经集成ucf-scripts的启动

启动方式对比优劣

全局启动和项目内脚本启动区别：

启动方式优点缺点
全局启动无需根据项目一次次安装重复依赖npm包节省磁盘空间速度不受项目内工具版本控制，会导致每个开发者环境不统一，出现未知版本错误等
脚本启动无需管理全局环境变量、不污染全局变量、随时根据项目内版本更新、可控每一次版本多次项目使用需要反复安装、占用磁盘空间大

项目配置文件说明

UCF微服务前端工程核心配置文件只有一个ucf.config.js下面对配置文件说明：

module.exports = () => {
    return {
        // 启动所有模块，默认这个配置，速度慢的时候使用另外的配置
        // bootList: true,

        // 启动这两个模块，不启动调试，关闭构建
        bootList: [
            "demo-app-org",
            //"demo-app-staff"
        ],
        // 代理的配置
        proxy: [
            {
                enable: true,
                headers: {
                    // 与下方url一致
                    "Referer": "http://iuap-meger-demo.test.app.yyuap.com"
                },
                //要代理访问的对方路由
                router: [
                    '/iuap'
                ],
                // pathRewrite: {
                //     '^/api/old-path': '/api/new-path', // rewrite path
                //     '^/api/remove/path': '/path' // remove base path
                // },
                url: 'http://iuap-meger-demo.test.app.yyuap.com'
            }
        ],
        // 静态托管服务
        static: 'ucf-common/src/static',
        // 是否展开静态引用资源
        res_extra: true,
        // 构建资源是否产出SourceMap
        open_source_map: true,
        // 全局环境变量
        global_env: {
            GROBAL_HTTP_CTX: JSON.stringify("/iuap_demo"),
        },
        // 别名配置
        alias: {
            //'ucf-apps': path.resolve(__dirname, 'ucf-apps/')
        },
        // 构建排除指定包
        externals: {
            //'tinper-bee': 'TinperBee'
        },
        // 调试服务需要运行的插件
        devPlugins: [],
        // 构建服务需要运行的插件
        buildPlugins: []
    }
}

功能配置节点说明

配置项说明默认值可选值备注
bootList启动、构建入口配置，true表示所有模块全部启用，数组参数按需模块使用truetrue,['app-name','app-demo']一般默认开启所有模块的调试和构建，低配置机器或者只需要开发一块模块的话可以选择性的去配置单独启动
proxy开发调试阶段的代理服务配置[]enable:true 是否有效代理,false表示关闭. headers:{} 设置代理请求的消息头. router:['/iuap','wbalone']. url:'proxy.example.com'. 本地请求代理对方服务器地址. pathRewrite:{}URL重写服务. opts:{} 如内置配置无法满足需求，需要单独设置原生配置 http-proxy-middleware.数组节点可以配置多条代理服务，通过enable来控制启用哪个，针对一些服务器校验头信息例如：Referer等就需要设置，其他常规的设置工具已经内置，代理路由router表示设置的几个路由访问后会代理到对方服务器上，url就是对方服务器地址
global_env程序内公共变量null同webpack4 { key : value }接收K、V格式如：{GROBAL_HTTP_CTX: JSON.stringify("/iuap_demo")}
alias别名null同webpack4 {key : value}接收K、V格式如：{'ucf-apps': path.resolve(__dirname, 'ucf-apps/')}
externals排除指定的包用外部变量代理提升打包性能null同webpack4 { key : value }接收K、V格式如：{'tinper-bee': 'TinperBee'}
loader内置加载器无法处理需要单独去设置处理[]同webpack4 loader
devPlugins开发环境加载的插件[]同webpack4 plugin开发阶段使用的插件
buildPlugins生产环境加载的插件[]同webpack4 plugin生产阶段使用的插件
open_source_map构建资源生产环境的时候产出sourceMaptruetrue,false-
csscss loader的optionsundefined-具体参考www.npmjs.com/package/css…
lessless loader的optionsundefined-具体参考www.npmjs.com/package/les…
res_extra是否展开静态引用资源，用于打包处理字体、图片等资源产出，或者不使用展开资源会打包到css方便管理truetrue,false-
static静态托管服务，不按需打包undefined-脚手架内的任意文件夹即可，如：static : 'ucf-common/src/static'
babel_presetsbabel使用的 presetsundefined-如：require.resolve('@babel/preset-react')
babel_pluginsbabel的插件undefined如：require.resolve("babel-plugin-import-bee")
scan_root自定义文件夹作为扫描微应用入口，原则上是按照./自定义目录/*/src/app.js扫描undefined-
dist_root输出自定义文件夹undefined-
host自定义IP、域名启动undefined支持IPV4、IPV6、域名
postcss_pluginsPostCss Pluginundefined-

自动开启浏览器

通过配置npm启动命令：

  "scripts": {
    "start": "ucf-scripts start --homepage=demo-app-org",
    "build": "ucf-scripts build"
  }

版本

  • 1.2.8 增加limit参数，用于设置静态资源大于多少后进行base64转码
  • 1.2.7 修复启动端口冲突的问题
  • 1.2.6 增加less配置参数
  • 1.2.5 增加publicPath={boolen}字段，用于解决需要进行按需加载优化的项目，开启该配置后 项目中资源依赖路径将使用 context 字段作为资源依赖公共路径，并且路径依赖由原来的相对路径变为 /开头的绝对路径
  • 1.2.4 支持Less-Loader的JavaScript
  • 1.2.3 增加 postcss_plugins 参数用于支持扩展PostCss Loader的插件机制
  • 1.2.2 解决在使用了context后，静态资源地址不正确的问题以及静态资源根据开发环境不同加载对应的脚本
  • 1.2.1 支持自定义域名、IP绑定参数host、对应文档更新
  • 1.2.0 实现splitChunks参数暴露、版本号锁定
  • 1.1.9 解决启动autoprefixer红色警告的问题
  • 1.1.8 显示文件名和构建时间&新特性实现多级构建源码目录
  • 1.1.7 修复启动或构建执行三次配置文件的问题，修复第一次传递错误环境参数值
  • 1.1.6 增加自定义入口扫描scan_root、自定义输出目录dist_root
  • 1.1.5 支持babel的presets、plugin参数，更新对应使用文档，ucf.config增加babel_presets、babel_plugins
  • 1.1.4 升级clean-webpack-plugin、get-port，去除压缩插件uglifyjs-webpack-plugin使用内置压缩插件terser-webpack-plugin
  • 1.1.3 解决res_extra参数的差异化，现在不管是development还是production都是一致的路径
  • 1.1.2 完善res_extra:true性能优化，只针对构建上线打包的时候生效，拆分公共vendor、js、css
  • 1.1.1 修复静态服务没有设置的错误
  • 1.1.0 增加调试和打包的静态依赖资源展开参数res_extra,增加静态服务功能参数static
  • 1.0.9 修复context不设置构建的时候没有html文件的问题
  • 1.0.8 增加context参数
  • 1.0.7 调整参数变化、输出目录调整ucf-publish、自动清理构建目录
  • 1.0.6 增加portal平台开发环境支持
  • 1.0.5 增加对CSS Loader配置支持
  • 1.0.4 增加CSS Modules支持、自动打开浏览器命令行--homepage
  • 1.0.3 增加注解支持
  • 1.0.2 增加SourceMap参数支持
  • 1.0.1 切换正式环境
  • 1.0.0 完善开发服务、精简配置、容错处理
  • 0.0.x 初步完成开发调试、构建、代理访问
avatar
文章
阅读
粉丝