Professional Documents
Culture Documents
⻘青栀
前端⼯工程师 & 咖啡爱好者
蚂蚁开发者⼯工具 凤蝶
01.Why 02.How
为什什么研发 蚂蚁开发者⼯工具 蚂蚁开发者⼯工具的 架构与实现
介绍蚂蚁开发者⼯工具的功能以及研发的背景 介绍蚂蚁开发者⼯工具的架构以及插件的研发
01. 为什什么研发 蚂蚁开发者⼯工具
WebStorm & IDEA
24%
VS Code
Visual Studio 54%
10%
架构
内核
Plugin System Editor Auth Project Workspace Dev Tools UI Sets
内核 + 插件化
plugin-installer languages login project-mng ui registry debug-protocol React
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
IPC
来模拟真实运⾏行行环境
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