页面场景模板配置化

[alvinhui]

1. 产品方案

1.1 角色和关系

包含角色：

• 工具开发者
• 页面模板开发者
• 业务开发者

各角色的关系：

• 工具开发者：
  • 输出：模板开发工具
  • 输出：VS Code 插件
• 页面模板开发者
  • 使用：模板开发工具
  • 输出：场景化模板
• 业务开发者
  • 使用：VS Code 插件
  • 输出：前端页面代码

2.2 业务开发者使用链路

第一步：唤起创建页面界面

1. 通过侧边栏唤起
2. 通过命名面板唤起

第二步：选择模板

第三步：配置模板

可配置的内容由模板指定。

第四步：生成页面

生成代码：

├── PageName/
│   ├── components/
│   ├── index.tsx

2.3 页面模板开发者开发链路

使用 Iceworks 脚手架进行开发。

第一步：初始化物料项目

$ mkdir my-material && cd my-material
$ iceworks init

第二步：开发页面项目

页面项目示例：https://github.com/alvinhui/example-for-iceworks-page-template

开发一个 Example 用于展示用户和任务信息，我们在项目根目录执行命令，添加一个页面项目：

$ iceworks add page

目录结构：

.
├── blocks
├── package.json
└── pages
    └── example
        ├── config
        │   ├── mock.js                   模拟配置
        │   └── settings.json             用于生成表单的配置
        └── src                           模板源码
            ├── components
            │   ├── Todos
            │   │   └── index.tsx.ejs
            │   └── User
            │       └── index.tsx.ejs
            ├── index.tsx.ejs
            ├── build.json
            └── package.json

执行以下命令即可开始开发：

$ cd page/example
$ npm install
$ npm start

物料开发完成后，即可通过 npm 发布。

模板开发规范

src/

src 文件夹用于存放页面模板，模板使用 ejs 开发。入口及组件都可以用 ejs 来进行开发。

config/

config 文件夹存放页面模板可配置项，最终用于生成供业务开发者使用的配置化表单：

• setings.json：
  • type: 用于生成表单的模式，提供 formily、custom 选项；默认 formily。
• mock.js: schema 的对应的的模拟数据

package.json

新增 pageConfig 字段，基础子字段同 blockConfig。

build.json

添加 build-plugin-material-template 插件，使用模板化方案。

或者更新 build-plugin-block 插件，方案二选一

{
  "plugins": [
    "build-plugin-block",
    "build-plugin-material-template",
    "build-plugin-fusion",
    ["build-plugin-moment-locales", {
      "locales": ["zh-cn"]
    }]
  ]
}

setings.json

type = formily

待补充。

type = custom

可使用自定义的组件渲染表单，可配置字段为：

{
  "type": "custom",
  "assets": {
    "css": "https://unpkg.com/example-component-tesing2@1.0.1/dist/ExampleComponent.css",
    "js":  "https://unpkg.com/example-component-tesing2@1.0.1/dist/ExampleComponent.js",
  },
  "library": "ExampleComponent"
}

自定义组件的规范：

• 必须是 React 组件
• 必须是 umd 模块
• 必须实现 onSubmit API，提交表单时调用该方法，传出设置的数据：onSubmit: () => object

第三步：生成物料数据

将每个物料发布到 npm 之后，我们即可生成物料集合数据，在根目录下执行以下命令：

$ iceworks generate

会生成 build/materials.json 文件，这个文件描述了整个物料集合的元数据。

第四步：发布物料数据

接着通过 iceworks sync 方式将物料数据同步到物料中心，也可以通过私有的服务托管，同步完成后我们会得到一个 url 可以访问到这些物料数据。

2. 技术方案

2.1 Iceworks 脚手架

• iceworks-cli
  • 新增命令： iceworks add page 在物料仓库添加页面项目

    页面项目示例：https://github.com/alvinhui/example-for-iceworks-page-template

  • 增强命令：iceworks generate 支持生成 pages 数据
• build-script
  • 新增插件： build-plugin-material-template ，实现可本地调试模板化的 src

2.2 Iceworks 插件

在 iceworks-ui-builder 新增创建页面链路，选择模板创建页面。

1. 选择模板：从数据源获取页面模板列表
2. 配置模板：
   • 根据数据源从 npm 源下载模板的压缩包，获取压缩包内的 config/settings.json
   • 根据配置渲染表单
     • formily：待定
     • custom：从 CDN 组件代码，渲染组件到应用中
3. 生成页面：获取到用户配置的数据，注入到模板，生成页面代码

2.3 官方页面物料

至少三个官方页面物料：https://github.com/alibaba-fusion/materials

3. 里程碑

发布时间点：8.27

1. Iceworks 脚手架支持页面物料的开发：8.20 交付
2. Iceworks 插件支持通过页面模板配置生成代码：8.27 交付
3. 官方物料仓库添加页面物料：8.25 交付

技术运营：8.31 发布文章

相关资料：

• iceworks CLI: https://github.com/ice-lab/iceworks-cli
• 物料开发：https://ice.work/docs/materials/about
• build-scripts: https://github.com/ice-lab/build-scripts
• build-plugin-block: https://www.npmjs.com/package/build-plugin-block

[andyforever]

1. 物料中心增加场景类型字段，先发CDN
2. 场景分类：通用场景、业务场景
3. 涉及脚手架改动
4. 配置生成（.schema配置或者指定组件仓库配置）
5. 生成代码， config -> jsx的代码

[andyforever]

开发页面模板遇到的几个问题：

1. 开发过程中如果修改mock.js的文件，ejs不会按照最新的数据编译，需要重新tnpm start
2. ejs编译之后的模板需要执行一下代码格式化js beautify ，不然代码可读性很差（有缩进问题）
3. 页面模板开发完成后，在浏览器里调试并没有自动加载执行（页面空白？）

[sspku-yqLiu]

开发页面模板遇到的几个问题：

1. 开发过程中如果修改mock.js的文件，ejs不会按照最新的数据编译，需要重新tnpm start
2. ejs编译之后的模板需要执行一下代码格式化js beautify ，不然代码可读性很差（有缩进问题）
3. 页面模板开发完成后，在浏览器里调试并没有自动加载执行（页面空白？）

第三点可以具体描述一下吗，没有太懂。

[alvinhui]

0.8.0 已发布