分享人：呼荣，钉钉前端开放能力建设负责人
一键回看视频地址：一键回看
目录
一、背景
二、什么是DingStudio？
三、DingStudio插件能力
四、DingStudio资源托管
五、Q&A
一、背景
钉钉的前端研发工具主要有三类：
- DingTalk Design CLI
前端应用研发命令行工具，提供模板初始化、研发、构建等能力； - 微应用调试工具
web模拟钉钉容器调试能力； - 其他外部工具
提供网络代理、接口mock等辅助功能；
存在问题
目前钉钉的前端研发工具功能比较分散，不同功能的实现需要依赖不同的工具，不利于研发效率的提升。
DingStudio应运而生。
二、什么是DingStudio？
DingStudio是一款辅助应用开发的桌面端应用程序，旨在提高前端开发效率，通过提供各种小工具以及集成钉钉微应用研发、调试等能力，让web开发调试更简单。
DingStudio优势
- 开箱即用
DingStudio是一个跨平台的桌面端应用，安装即可使用，无额外依赖； - 所见即所得
可视化操作界面，上手简单，研发调试功能一键即用； - 持续封装
方便更新和维护，作为重点开放门户持续输出最佳实践；
- 开箱即用
DingStudio功能
- 研发支撑
通过模板初始化项目、本地项目管理、存量项目导入、项目运行、构建与产物管理等； - 调试增强
资源代理本地化调试、容器模拟调试、调试插件注入、真机预览调试等。
- 研发支撑
- DingStudio下载
DingStudio 1.0.0版本于2022年3月正式发布，支持Windows和Mac版本，在DingStudio官网可以获得DingStudio下载，功能说明和实用案例介绍，帮助开发者快速上手使用。 
三、DingStudio插件能力
DingStudio插件整活
DingStudio插件是一种附加脚本，通过一定的匹配规则，在html的指定位置加载定制脚本，以实现辅助开发 的目的。
使用插件的优势在于：- 不会污染实际代码，避免调试脚本被带上线的隐患；
- 可以随时打开和关闭，不同的项目灵活选择不同的插件；
- 便于扩展和共享。
插件使用案例说明
案例1：使用插件做真机调试
具体步骤如下：- 首先，在开发者后台获取调试脚本，点击“生成专属测试工具”后，按照步骤初始化真机调试SDK，即可实现在钉钉客户端测试应用；
- 打开DingStudio插件面板，新建插件，然后填入上一步获取到的外链js和代码；
- 保存后，访问调试工具页面，然后真机打开要调试的页面，即可开始调试。
- 首先，在开发者后台获取调试脚本，点击“生成专属测试工具”后，按照步骤初始化真机调试SDK，即可实现在钉钉客户端测试应用；
案例2：使用插件做api mock
虽然api mock已经集成入Web模拟器页面，但如果希望通过比如存量页面中运行接口api或js.api等mock能力，也可以通过插件来配置。
具体步骤如下：- 在Anymock平台配置项目；
- DingStudio配置插件，通过Mock SDK提供接口Mock的能力，并初始化Mock SDK；
- 打开DingStudio插件面板，新建插件，然后填入上一步获取到的外链js，在注入内容中填入anymock平台对应项目的token，选择是否开启jsapiMock、httpMock等；
- anyMock平台配置api映射关系；
- 开启插件；
使用Mock的优势在于，可以模拟不同的运行状态，而无需真正运行相应的场景，以实现合理定位代码边界情况、进行代码自动化测试等等。
四、DingStudio资源托管
DingStudio资源托管能力
- 提供测试和线上两套环境，快速验证；
- 前端资源急速发布，无配置成本；
- 免域名申请，支持资源访问的cdn加速。
DingStudio资源托管流程
如图所示，首先为企业新建应用或选择关联企业现有应用，然后创建/选择对应的迭代版本号，测试环境发布和验证，最后进行线上发布，迭代结束。
具体步骤如下：- 打开DingStudio，选择静态资源发布；
首次发布需要配置初始化应用信息：如绑定组织、关联应用appid、自定义发布路径等，保存后进行初始化；
配置项说明：- 组织：有钉钉开发权限的组织；
- 关联应用appid：进入开发者后台找到对应的应用，复制appid；
- 自定义发布路径：两段式路径，建议第一段对应企业，第二段对应项目，如hurong/hurongApp；
初始化完成进入应用资源发布页面，点击“预发布资源”；
选择发布目录并输入迭代对应版本号，并点击确认；
配置项说明：- 发布目录：项目构建后的目录；
- 发布文件类型：目前支持jss，css，以及常见的图片文件类型，暂不支持视频文件；
- 迭代对应版本号：推荐使用三段式版本号，如：0.1.0；
- 点击发布上线，完成版本发布；
- 访问资源：固定域名/资源路径/版本号/main.js。
- 打开DingStudio，选择静态资源发布；
DingStudio资源托管注意事项
- 只有对应企业开发者权限才可以操作；
- 目前支持的资源类型：前端资源（css/jss），普通图片类型；
- 资源大小限定5M以内，超出大小暂不支持；
- 测试环境的资源（即预发布资源）不会永久存在，会定期清理，因此不要使用测试环境资源做实际应用，以免出现后期找不到资源的现象。
目前DingStudio资源托管为免费服务，后续会考虑进行商业化发展。
以上是DingStudio的介绍，感兴趣的朋友欢迎加入DingStudio答疑交流群一起交流分享。
五、Q&A
Q：测试环境是否可以自行删除？
A：不能。目前针对测试环境采取的是定期清理的策略。
Q：DingStudio的整体能力概括来说有哪些？
A：概括来说，DingStudio工具的能力包括：终端网络代理能力，脚本插件扩展能力，研发项目管理能力，使用Web模拟器进行页面调试能力，项目一键运行能力，资源托管能力等，所有这些能力都可以通过DingStudio官网找到对应的使用指南。
Q：DingStudio后续迭代的计划有哪些？
A：DingStudio作为钉钉推出的面向开发者的工具开放门户，后续的迭代会稳步进行。目前的规划是每个月推出一个包含新功能的大版本，同时也会有一些修复的小版本，比如资源托管能力会在4月推出的迭代版本中跟大家见面。大家可以持续关注DingStudio官网和答疑群获取最新的迭代信息。
