2.3.0 • Published 6 years ago

upaas-component-demo3 v2.3.0

Weekly downloads
2
License
MIT
Repository
-
Last release
6 years ago

前言

在upaas-protal 项目的开发中,我们引入了pageBuilder,通过前端页面的组件化+pageBuilder强大的页面构建功能,满足不同租户下的差异化与个性化需求,并收获了很好的反馈。伴随着新首页的上线,越来越多的产品线开始了解到pageBuilder的强大功能,并尝试接入来给用户提供一种新颖独特的用户体验。

这就出现了几个问题,在upaas-protal项目中,pageBuilder是作为一个组件集成到项目中去的,包括页面的编辑和预览等。页面对应的组件也是直接在项目中开发,打包和上线。由此而造成的几个问题: 1. 伴随着组件的增加,项目体积越来越大,打包时间越来越长。 2. 由于单个组件而导致的bug,需要整个项目重新发版上线 3. 缺少外部组件引入和开发规范,其他产品线难以接入,如果想接入,其对应的组件代码也需要放到upaas-portal项目中,给pageBuilder的推广造成和大障碍

基于上面提到的几个问题,我们可以想到的理想化解决方案是这样子的: 1. 首先,关于页面搭建的部分,抽离出来,作为一个单独的应用,即关于pageBuilder的那部分功能 2. 制定一套外部组件开发和引入规范。组件单独开发,单独打包上线,然后作为外部资源,引入到pageBuilder应用中

pageBuilder单独的应用基本开发完成,即ux-page-builder,本项目就是解决第二个问题,用于外部组件的开发,调试,组件打包,dll打包等一系列的流程。

本方案是基于talent-ui-2.0一些列的打包工具实现的,包括talent-ui-dll-webpack-config, talent-ui-webpack-config, talent-ui-component-webpack-config

使用

先总体说下外部组件的开发和打包流程:

  1. 组件开发和调试,包括功能组件,属性组件,页面模版
  2. 打包为dll
  3. dll发版,并将dll文件同步到线上服务器
  4. 注册到pageBuilder项目中

下面具体阐述下每个流程及其需要遵守的开发规范

组件开发和调试

src/components文件下的开发对应的功能组件,属性组件,和页面模版,开发后的组件,可以在项目yarn start启动后直接在pageBuilder内调试。

项目中有一个演示用的功能组件Button,属性组件SetButton, 页面模版组件TemplateTwoColumn

image

注:开发后的组件,需要在对应文件夹下的index文件内对外输出

打包dll

在打包dll之前,需要配置下src/dll-config文件。 1. projectName:组件对应的项目名称,如upaas,在打包以后,会在src/venders/下生成对应的文件夹 2. dllList: 在打包dll的时候,为了防止重复打包,某些外部依赖是不能打包的,例如react等。 目前我们将一些常用的基础库打包为了@beisen/talent-ui-dll-foundation

然后执行

    yarn build-dll

如果打包成功,会看到在src/veners/下看到对应的项目名称文件夹及其里面的组件代码,以及根目录下的dist下的dll代码

执行yarn build-dll之后,实际上webpack会执行两次打包,一次是将所有开发的组件代码作为组件的方式打包,生成到src/verders/目录下,然后,将打包出来的组件代码,打包为一个dll,注册到pageBuilder项目中去。第一次打包的目的,是保证在以后组件更新和发版的过程中,manifest.json文件内,组件代码目录保持不变。

发版

修改package.json内对应的信息,如name version ,执行发版。

dll虽然以package的形式发布,但是其资源在pageBuilder页面中是单独引入的,所以开发者需要将dll资源同步到服务器上,并提供一个可以访问的远程地址 。

将文件同步到远程服务器

将各产品线开发的pageBuilder组件集中管理,方便访问。 新建一个项目,并接ci任务。将开发的pageBuilder组件以产品线为目录放到extra目录下,当需要同步服务器代码的时候,就触发一次ci任务

  • 组件开发:
  • 组件更新:

注册

注册时需要提供的信息有:

{
    projectName: '项目名称,如upaas',
    dllName:  '发布的npm包名称',
    remoteStyleFile: '样式文件的远程服务器地址',
    remoteDllFile: 'dll文件的远程服务器地址'
}

注意事项:

1. 静态资源及css

在组件开发中,组件内引用的静态资源,如图片等,需要开发者以绝对路径的形式将其引入,如一个远程cdn地址。

至于css,打包完成后,在src/venders/项目名称/dist/下会有一个style.css文件,开发者需要将这个样式文件放在远程服务器上,并在注册项目组件的时候将cdn地址连同其他信息一同提供给pageBuilder

2. 发版后的组件更新

在更新组件的时候,因为有的更新涉及到依赖关系的更新,所里这里分为两种情况,两种情况下的更新流程稍显不一样

  • 涉及到依赖关系改变的更新

依赖关系的改变,主要体现在打包后manifest.json文件的变化,如:增加了新的依赖,或者减少了依赖。在增加新依赖的情况下,更新dll包的时候,除了将dll包更新发版,和同步服务器资源外,还要联系pageBuilder,更新发版。

主要是因为webpack在打包构建的时候,需要依赖新的manifest.json文件查找依赖关系。否则访问不到新增加的依赖。

  • 不涉及到依赖关系改变的更新

如果在更新中,不涉及到依赖关系的更新,只有组件代码或者UI方面的更新,则只需要将打包后的dll代码同步到线上服务器,原则上是不需要将dll包发版更新的。当然,你也可以选择发布一个新版本的npm包

TodoList :

  1. component打包过程中,样式问题
  2. 组件打包发版成功后,注册到pageBuilder内时需要提供的信息:projectName, 依赖?
  3. talent-ui-dll-webpack-config 添加对dllList参数的支持,添加dllReferencePlugin--
  4. talent-ui-component-webpack-cofig添加jsx支持
  5. parse-dll部分的逻辑抽离出来,单独发版
  6. pageBuilder运行态也需要放到ux-page-builder项目中
  7. ux-page-builer添加预览和运行态页面
  8. 打包dll的过程中,依赖中的样式问题? 流程:
  9. dll-parser README.md
  10. dll-webpack-config 样式的问题
  11. 打包@talentui/ethos 组件
  12. pageBuilder项目开发 测试 以及本地调试环境的搭建
  13. upaas-component-dll : immutability-helper underscore.string recharts @beisen/calendar?
  14. 开发的组件需要注册给后端接口,需要知道组件的name 以及 displayTitle,这就涉及后端组件接口的改造。首先以产品线将组件聚合
  15. 组件内的接口调用?其他产品线的接口调用的跨域问题?

打包upaas-component组件时遇到的问题:

  • 组件部分样式丢失?
  • MyMetting组件的bug
  • 属性组件PlanCompletionRateSetting的问题 Emit~er is not constructor