插件类型
插件名 | 插件描述 | 运行时机 | 输入 | 输出 | 状态 |
---|---|---|---|---|---|
inspectPlugin | 检查设计稿上的问题以及提示 | 转代码之前 | JSONSchema | D2CInspect[] | 🚧 |
schemaPlugin | 干预 JSX 生成之前的 schema | 产出 JSON Schema 之前 | JSONSchema | JSONSchema | 🚧 |
generatePlugin | 自定义转码输出的内容 | 输出代码产物之前 | GeneratePluginInput | GeneratePluginOutput | ✅ |
InspectPlugin
查看 设计稿检查 自定义插件部分。
GeneratePlugin
插件打包配置
target
browser,插件包运行在浏览器环境,打包后不应包含 node 相关 API。
format
UMD 格式,最好是 standalone,可通过全局变量方式引入通用第三方包以减小包体积。
externals
externals 表示全局提供的包,第三方插件不需要打包到插件里。
包在源码的引用路径 | 打包后转换为引用全局变量的 name |
---|---|
lodash | _ |
prettier | prettier |
prettier/parser-babel | prettierBabelParser |
prettier/parser-postcss | prettierPostCSSParser |
Buffer | buffer |
注意
- 打包后的产物不要包含 node API
- 打包后的产物不要 require 第三方包,模块应该 built-in 或者使用 externals 中包含的包
- 支持的 externals 包会挂载到全局变量上,每个包都有具体的名字,打包时应该配置好这个名字,否则可能找不到对应的包
插件使用
设置页面通过配置 URL 的方式添加自定义插件。
错误处理
使用 Figma 插件时,如果自定义插件有报错,则执行下列动作。
- 跳过插件,不影响接下来的转换逻辑
- 将原有输入给插件的内容进行下面的转换
- 展示错误提示