基于 ucf-web 微前端框架的快速开发模式

@GuoYongfeng 2019-01-14 05:53:22发表于 iuap-design/blog 规范

快速初始化标准项目工程

首先下载 ucf-cli 命令行工具,通过一行命令快速生成标准工程:

$ npm install ucf-cli -g

执行初始化:

$ ucf init walsin-webapp

获得标准项目代码:

walsin-webapp
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── ucf-apps
├── ucf-common
├── ucf-public
└── ucf.config.js

对标准项目工程的解读和认识

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

关于 ucf-cli 工具:初始化和人机交互

ucf-cliucf-web 框架的 cli 工具,cli 相应功能说明:

  • ucf init:承担项目初始化的工作;
  • ucf new app:给ucf-apps 目录下下面创建微应用,单页应用、多页应用可选;

关于 ucf-scripts:集成的构建工具

  • ucf-scripts start:同时需要保证项目的启动、资源编译、可扩展配置能力,后面可以直接调用uba的能力;
  • ucf-scripts build:资源标准化编译;

说明:

  • ucf-scripts 的依赖资源自己维护,初始化项目的 package.jsondevDeependencies 只有 ucf-scripts

我们的目标是尽量让开发者对 ucf.cofig.js 无感,做到【默认好用】,尽量少去配置 ucf.config.js 。以下是配置文件的基本配置:

ucf.config.js


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

        // 启动这两个模块,不启动调试,关闭构建
        bootList: [
            "ucf-app-order",
            "ucf-app-staff"
        ],
        // 代理的配置
        proxy: [
            {
                enable: true,
                headers: {
                  // 与下方url一致
                  "Referer": "http://172.20.52.215:8888"
                },
                //要代理访问的对方路由
                router: [
                  '/iuap_walsin_demo', '/wbalone', '/iuap-saas-message-center/', '/iuap-saas-filesystem-service/', '/eiap-plus/', '/newref/', '/print_service/', '/iuap-print/'
                ],
                url: 'http://172.20.52.215:8888'
              }
        ],

        // 全局环境变量
        GLOBAL_ENV: {
            __MODE__: JSON.stringify(process.env.NODE_ENV),
            GROBAL_HTTP_CTX: JSON.stringify("/iuap_walsin_demo"),
        },

        // alias 别名配置,默认不需要配置
        alias: {
            components: path.resolve(__dirname, 'src/components/'),
            modules: path.resolve(__dirname, 'src/pages/'),
            routes: path.resolve(__dirname, 'src/routes/'),
        }
    }
}

ucf-apps 下的三类微应用:单体页面、单页应用SPA、模型驱动的应用mdfApp

微应用之单体页面

walsin-webapp/ucf-apps/walsin-app-order

├── README.md
├── package.json
├── src
│   ├── app.js
│   ├── app.less
│   ├── components
│   ├── container.js
│   ├── index.html
│   └── model.js
└── test
    └── .keep

微应用之单页应用SPA

walsin-webapp/ucf-apps/walsin-app-sales

walsin-app-sales
├── README.md
├── package.json
└── src
    ├── app.js
    ├── app.less
    ├── index.html
    └── routes
        ├── index.js
        ├── order
        │   ├── components
        │   ├── container.js
        │   ├── index.js
        │   ├── index.less
        │   └── model.js
        └── sales

微应用之模型驱动应用mdfApp

walsin-webapp/ucf-apps/walsin-app-mdfapp

walsin-app-sales
├── README.md
├── package.json
└── src
    ├── app.js
    ├── app.less
    ├── index.html

app.js 中的伪代码:


// ucf-mdf package:
// 1、提供基于协议规范解析的关键 API (SDK实现),支撑自定义模板
// 2、提供默认封装的标准模板、基础模板,供继承和复用
import { createMDFApp } from 'ucf-mdf/lib/core';

// 自定义模板
class myMDFApp extends createMDFApp {

}

// 作为页面对外暴露
export default myMDFApp


HTTP 规范:ucf-request

image

ucf-workbench

ucf-workbench 以 npm 包的形式发布,作为 ucf-web 框架中的标准工作台:可用于开发调试与应用集成。