Turbowarp ClipX 是一个高效开发部署turbowarp扩展的插件, 提供:
- ✨ 更好的接口风格 使用类和装饰器来定义扩展，更简洁和优雅
- ⚡ 便捷的缓存功能 提供缓存功能, 优化性能 (可在接口中自定义)
- 🔨 更好的开发环境 自动补全Turbowarp类型
- 📦 webpack 压缩 缩小打包JS文件体积, 提高加载速度和性能
- 🎃 注册异常检测 注册扩展时检查异常情况并拦截汇报
- 🎉 Typescript 支持 提供更好的类型检查和自动补全功能
- 🍎 ESLint 修复 自动格式化代码, 保持统一的风格和规范
- 🎉 Action 自动打包 使用action实现自动打包并加入release中, 方便在线获取
- ⚡ CLI 自动翻译 通过命令行无需配置参数即可进行i18n翻译
入口 /src/index.ts (javascript同理)
- 初始化安装依赖 (yarn pnpm同理, 推荐pnpm)
npm install
- dev
npm run dev
- eslint 修复
npm run lint
- 翻译
npm run i18n
- 打包
webpack 打包生成的js文件位于 dist/extension.js
npm run build
TurboWarp 扩展接口规范 更多前往 TurboWarp 中文文档
id是表示此扩展使用的唯一id的字符串应该只包含字符a-z和0-9 (同一个扩展应该始终使用相同的ID，因为更改它会破坏现有项目)name是一个字符串，告诉Scratch在侧栏中显示什么名称color1是一个hex格式的颜色，将设置为扩展的方块颜色blocks是定义扩展包含哪些积木的对象列表opcode是积木的内部名称，也对应于积木运行时默认将调用的方法*(可选func覆盖调用的方法名, 已弃用)- opcode不应该被更改
blockType定义积木的类型reporter圆形的带返回值的积木Boolean六边形的返回布尔值的积木command一个键积木hat响应事件积木
- ✨
bind接受一个function, 允许异步执行返回Promise - ✨
cache缓存enable是否开启缓存expiration缓存时间, 单位秒, 如果为0则永不过期
- ✨
text是一个字符串，用于定义积木在编辑器中的名称 格式为 [参数:类型]参数定义积木接受的参数的对象, 可能将在default和menu字段中引用类型定义要创建的输入形状 (不区分大小写)STRING字符串类型NUMBER用于数字输入BOOLEAN用于布尔输入 (默认值将被忽略)ANGLE用于角度COLOR颜色类型(hex格式, 如#fff)MATRIX5x5矩阵（以11101010101…字符串格式传递）NOTE用于音乐
default是参数的初始值, 接受一个字典, 键对应参数, 值对应参数的默认值menu如果有参数需选择多个给定的值, 则可加入至此参数, 接受一个字典, 键对应参数, 值对应多个给定的值的列表类型, 将生成下拉菜单disableMonitor是否积木强制删除复选框来创建监视器, 适用类型为REPORTER (带返回值的积木), 如果为真, 则删除变量左处的复选框
docsURI对应文档链接- ✨
debug是否开启控制台调试 (默认关闭, 即此插件本身不会有任何输出) - ✨
uptime定期缓存清理时间间隔, 单位秒, 默认为60秒 - ✨
i18ni18n 翻译source源语言，默认为简体中文accept目标语言列表，默认为英语和简体中文
没太看懂? 下面展示一个示例
import Extension from './include/plugin'
new Extension({
id: "ExampleExtension",
name: "example",
color1: "#0800ff",
blocks: [
{
opcode: 'output',
blockType: 'command',
text: '命令 [block:string] [type:string]',
default: { block : "参数2", type: "类型" },
menu: { block : [ "参数1", "参数2" ] },
bind: function({ block, type }) {
return `内容 ${block} 类型 ${type}`;
},
}, {
opcode: 'list',
blockType: 'reporter',
text: '获取一个空列表',
bind: () => [],
disableMonitor: true,
},
]
}).register();上文创建并注册了一个扩展ExampleExtension, 并在Scratch中显示为example, 方块颜色#0800ff, 并创建了两个方块:
第一个方块output的类型为键积木, 共有两个参数
block参数是一个下拉菜单, 字符串类型, 默认值为"参数2", 可选值为 参数1和参数2type参数是一个输入框, 字符串类型, 默认值为"类型"
绑定一个方法返回内容 {{block}} 类型 {{type}}
通过设置disableMonitor为真来强制删除复选框
第二个方块list的类型为带返回值的积木, 方法返回一个空列表
举一个非常简单的例子
原生 turbowarp
class Extension {
public getInfo() {
return {
id: 'FetchExtension',
name: 'fetch',
color1: '#00c4ff',
blocks: [
{
opcode: 'fetchReq',
// @ts-ignore
blockType: Scratch.BlockType.REPORTER,
text: 'fetch [uri] 方法[method]',
arguments: {
uri: {
// @ts-ignore
type: Scratch.ArgumentType.STRING,
defaultValue: 'https://example.com/',
},
method: {
// @ts-ignore
type: Scratch.ArgumentType.STRING,
defaultValue: 'GET',
},
}
},
],
menus: {
method: [
"GET",
"POST",
"PUT",
"DELETE",
],
},
};
}
fetchReq({ uri, method }): Promise<any> {
return fetch(uri, {
method: method,
});
}
}
// @ts-ignore
Scratch.extensions.register(new Extension());turbowarp-clipx
import Extension from "./plugin";
new Extension({
id: 'FetchExtension',
name: 'fetch',
color1: '#00c4ff',
blocks: [
{
opcode: 'fetch',
blockType: 'reporter',
text: 'fetch [uri:string] 方法[method:string]',
default: { uri: "https://example.com/" , method: "GET" },
menu: { method: ["GET", "POST", "PUT", "DELETE" ] },
bind: ({ uri, method }): Promise<any> => fetch(uri, { method, }),
},
]
}).register();实际上, 出于文档大小考虑, 这里只节选了一个方块的扩展示例, 那如果是做一个云数据库扩展呢? 更大的代码量, 在接口和方法上反复穿行...
所以结合了这一现状, 此插件借鉴Django路由的传参方式设计了更好的接口风格, 此插件的接口代码量仅占约原生的30~45%.
仓库密钥配置 TOKEN 为你的 GitHub Token, 当发布Release时, 会自动触发事件打包发送.