sspku-yqLiu commented 4 years ago

背景

在当前的 page 级物料开发链路中，模板开发者没有比较方便的调试手段。

预期的功能

页面模板调试：

判断如果是物料项目，则扫描物料文件夹并生成一个调试版的 material.json 。

这个 material.json 与发布版本中的不同，是依据当前物料文件夹（可以是未发布的物料）进行生成的。当获取物料源信息时，自动添加一个 %%DEBUG%% 物料源到列表中。在页面模板选择界面 %%DEBUG %% ，则获取当前物料项目页面文件夹的物料。

%%DEBUG%%

在监测到物料源名称为 %%DEBUG%% 后，不会使用从 npm 下载的模式，而是使用从本地复制 npm 包的形式进行物料下载。之后流程与在普通项目中调试相同，填写页面信息表格：

关于生成代码到哪里有如下两个方案：

生成到 .tmp 文件夹中，与 ice works-cli 完成联动，生成预览页面

进行配置，点击创建页面，将文件生成到 .tmp 文件夹中。

由于 block-service 提供的热加载功能是读取的 .tmp 文件夹下的内容，因此调试页面会变为由配置表单生成的界面。

如果此时开发者更改 ejs 模板文件，那么会重新触发热加载，预览界面会消失，也许把预览界面和 mocks.js 生成的页面分开比较好？

至此，开发者不需要代理，在本地即可进行 page 级物料的开发调试。
生成到一个模拟项目中：

插件会自动在根目录生成一个调试文件夹 debug/ 用户需要手动进入该文件夹输入npm start 查看生成页面，这样的好处是不会被覆盖掉。

注意需要将该文件夹添加到 .gitignore 与 .npmignore 中

alvinhui commented 4 years ago

判断是物料项目工作区然后在插件层面做一些适配的思路不错。

我觉得可以再进一步，就是：当工作区是物料项目的时候，这时候 Iceworks 物料源完全使用当前物料项目的数据，所有处理流程都是读取本地数据。

这样子我们基于物料的一些功能，诸如区块组装、添加区块都可以调试了。

当然上面这个方案涉及到的改造点比较多，但应该是一个「终极方案」。

alvinhui commented 4 years ago

我更新了一下产品方案，技术方案有些不太明确。 @sspku-yqLiu

几点提示：

技术方案的核心解题思路是：插件从 npm 读取数据变成从本地读取数据
要明确当前读取物料信息的操作有哪些，例如：
- 读取物料源列表：自动将本地物料项目加上
- 获取物料源信息（看看怎么在本地生成这个物料源信息，关注一下 source 的生成，因为后面要根据这个字段去获取文件）
在这些操作处做本地的兼容。看起来就是利用一下 source 字段。

物料源信息示例：https://ice.alicdn.com/assets/materials/react-materials.json

sspku-yqLiu commented 4 years ago

选择调试功能（生成页面、组装页面、生成项目、添加组件）
- 生成 source 字段为本地的 material json
- 将生成的 material.json 添加到当前的设置中
进行配置
- 复用 iceworks:ui-builder 的组装页面、生成页面、生成项目等功能
- 为相关下载功能兼容本地调试模式，即从本地进行复制
获取调试信息
- 如果有错误，在新打开一个命令行输出错错误信息：例如，看到渲染后的对象处因为是空白而报错，那么就可以理解到需要在这个地方设置为必要属性。
生成调试结果到指定文件夹或 .tmp 文件夹（二选一）
- 生成代码到指定文件夹：可能是一个模拟项目
- 生成代码到 .tmp 文件夹
预览生成页面
- 在模拟项目中 npm start
- 使用脚手架 npm start 预览

alvinhui commented 4 years ago

生成调试结果

对物料开发者：

技术手段：

选择需要调试的本地物料项目文件夹
- 生成 source 字段为本地的 material json
- 将生成的 material.json 添加到当前的设置中
开始用该物料项目进行开发
- 使用 iceworks:ui-builder 的区块组装页面、模板生成页面、模板生成项目等功能
- 为相关下载功能兼容本地模式，即从本地进行复制