蚂蚁开发者⼯工具

⻘青栀
前端⼯工程师 & 咖啡爱好者
蚂蚁开发者⼯工具 凤蝶
01.Why 02.How
为什什么研发 蚂蚁开发者⼯工具 蚂蚁开发者⼯工具的 架构与实现
介绍蚂蚁开发者⼯工具的功能以及研发的背景 介绍蚂蚁开发者⼯工具的架构以及插件的研发
01. 为什什么研发 蚂蚁开发者⼯工具
 WebStorm & IDEA
24%

VS Code
Visual Studio 54%
10%

Sublime Text Atom

7% 5%
开放⽣生态 场景化研发
⽆无论是去年年蚂蚁全⾯面开放 12 项能⼒力力， 随着⽣生态开放，必然伴随特定的研发
还是今年年⽀支付宝⼩小程序公测，开放⽣生 场景与研发模式，针对这些场景，⼀一
态，携⼿手⽣生态共创已成为主旋律律。 站式研发⼯工具是⼀一种不不错的选择。
 场景化 IDE

编码增强 运⾏行行与调试 流程串串联

蚂蚁开发者⼯工具
⾯面向蚂蚁⽣生态的 场景化 IDE 研发框架

云凤蝶 IDE ⽀支付宝⼩小程序 IDE 更更多的场景化IDEs

02. 架构与实现
 Electron
Chromium Node.js Native APIs
Build cross platform desktop apps
with JavaScript, HTML, and CSS
 场景插件
功能插件
login scaffolds simulator devtool

架构
内核
Plugin System Editor Auth Project Workspace Dev Tools UI Sets
内核 + 插件化
plugin-installer languages login project-mng ui registry debug-protocol React

plugin-lifecircle commands file watcher & utils Dva

plugin-context window AntD

plugin-placeholder config
 插件 场景化 IDE

H5 APP

H5 模板

内核 ⽀支付宝⼩小程序 研发场景s

DingTalk
 01 插件注册
DingTalk Plugin 02 研发 钉钉模拟器器
开发⼀一个类似云凤蝶、⽀支付宝⼩小程序
03 集成 DevTool
的钉钉插件

04 发布/安装插件
插件注册 初始化 配置 Package.json

添加项⽬目脚⼿手架

添加项⽬目创建逻辑 Done
插件注册

注册完成之后，就可以在调试模式下
看到钉钉插件，并且可以正常创建项⽬目
& 编码
模拟器器
通过 WebView + Mock Service
来模拟真实运⾏行行环境
 import { workspace, DefaultPlaceholder } from ‘cygnus';
import * as simulatorServer from './simulator/server';
import Simulator from './simulator';

模拟器器
exports.activate = (context) => {
workspace.registerUIComponentProvider(
DefaultPlaceholder.simulator,
() => ({
render: Simulator,
通过 WebView + Mock Service style: () => context.asAbsolutePath('./lib/index.css'),
来模拟真实运⾏行行环境 }),
);

simulatorServer.start(context.cwd);
};
 A Renderer Process

Create & Inject Preload Scripts

IPC

模拟器器 Preload Scripts Simulator Service

通过 WebView + Mock Service Simulator View

Simulator View
(webview)
(webview)

来模拟真实运⾏行行环境

Node.js APIs Native APIs

 A Renderer Process

Chrome DevTools Frontend

Dev Tool (in a webview)

WS Simulator View
集成 Chrome Dev Tool (webview)
debugger protocol

WS

host/inspect

Chromium
发布和安装
1. 插件发布⾮非常简单，npm publish 即可
2. 安装过程⻅见右侧
Possibility of build your own IDE
 THANKS
fanzheng.fz@antfin.com