前言

在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

注：开发后的组件，需要在对应文件夹下的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~~