本篇内容介绍了“怎么使用Vue3开发Fimga插件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Figma 是一款当下流行的设计工具,越来越多的设计团队开始从 Sketch 转向 Figma。Figma 最大的特点是使用Web技术开发,实现了完全的跨平台。 Figma 插件也是使用 Web 技术开发,只要会 html
、 js
、 css
就能动手写一个 Figma 插件。Figma 插件原理介绍 Fimga 插件之前,我们先来了解一下 Fimga 的技术架构。Figma 整体是用 React 开发的,核心的画布区是一块 canvas
,使用WebGL来渲染。并且画布引擎部分使用的是WebAssembly,这就是 Figma 能够如此流畅的原因。桌面端的Figma App 使用了 Electron——一个使用Web技术开发桌面应用的框架。Electron 类似于一个浏览器,内部运行的其实还是一个Web应用。在Web端开发一套安全、可靠的插件系统, iframe
无疑是最直接的方案。 iframe
是标准的W3C规范,在浏览器上已经经过多年应用,它的特点是:安全,天然沙箱隔离环境,iframe内页面无法操作主框架;可靠,兼容性非常好,且经过了多年市场的检验;但是它也有明显的缺点:与主框架通信只能通过 postMessage(STRING)
的方式,通信效率非常低。如果要在插件里操作一个画布元素,首先要将元素的节点信息从主框架拷贝到 iframe
中,然后在 iframe
中操作完再更新节点信息给主框架。这涉及到大量通信,而且对于复杂的设计稿节点信息是非常巨大的,可能超过通信的限制。为了保证操作画布的能力,必须回到主线程。插件在主线程运行的问题主要在于安全性上,于是Figma的开发人员在主线程实现了一个 js
沙箱环境,使用了Realm API。沙箱中只能运行纯粹的 js 代码和Figma提供的API,无法访问浏览器API(例如网络、存储等),这样就保证了安全性。感兴趣的同学推荐阅读官方团队写的《How to build a plugin system on the web and also sleep well at night》,详细介绍了 Figma 插件方案的选择过程,读来获益良多。经过综合考虑,Figma 将插件分成两个部分:插件UI运行在 iframe
中,操作画布的代码运行在主线程的隔离沙箱中。UI线程和主线程通过 postMessage
通信。插件配置文件 manifest.json
中分别配置 main
字段指向加载到主线程的 js
文件, ui
字段配置加载到 iframe
中的 html
文件。打开插件时,主线程调用 figma.showUI()
方法加载 iframe
。写一个最简单的 Figma 插件为了了解插件的运行过程,我们先写一个最简单的 Figma 插件。功能很简单:可以加减正方形色块。首先要下载并安装好 Figma 桌面端。新建一个代码工程,在根目录中新建 manifest.json
文件,内容如下:根目录新建 index.html
,当前色块数量:0根目录新建 main.js
,内容如下:Figma桌面APP,画布任意地方右键打开菜单, Plugins
-> Development
-> Import plugin from manifest...
,选择前面创建的 manifest.json
文件路径,即可成功导入插件。
然后通过右键, Plugins
-> Development
-> simple-demo
(插件名),就可以打开插件。测试点击按钮,功能正常。只不过页面上还未出现色块(别着急)。
通过 Plugins
-> Development
-> Open console
可以打开调试控制台。可以看到我们打印的日志。前面讲了,画布代码是运行在主线程的,为了执行效率,插件要操作画布内容也只能在主线程执行,即在 main.js
中。 main.js
中暴露了顶级对象 figma
,封装了用来操作画布的一系列API,具体可以去看官网文档。我们用 figma.createRectangle()
来创建一个矩形。主线程需要通过 figma.ui.onmessage
监听来自UI线程的事件,从而做出响应。修改后的 main.js
代码如下:同时要修改 index.html
中的部分代码,通过 parent.postMessage
给主线程发送事件:重新启动插件,再试验一下,发现已经可以成功加减色块了。使用 Vue 3 开发 Figma 插件通过前面的例子,我们已经清楚 Figma 插件的运行原理。但是用这种“原生”的 js
、 html
来编写代码非常低效的。我们完全可以用最新的Web技术来编写代码,只要打包产物包括一个运行在主框架的 js
文件和一个给 iframe
运行的 html
文件即可。我决定尝试使用 Vue 3
来开发插件。(学习视频分享:vuejs教程)关于 Vue 3 就不多做介绍了,懂的都懂,不懂的看到这里可以先去学习一下再来。这里的重点不在于用什么框架(改成用vue 2、react过程也差不多),而在于构建工具。Vite 是Vue的作者开发的新一代构建工具,也是 Vue 3推荐的构建工具。
我们先建一个 Vue
+ TypeScript
的模板项目。然后通过浏览器打开 http://localhost:3000
就能看到页面。我们把前面的插件demo移植到 Vue 3 中。 src/App.vue
代码修改如下:当前色块数量:{{num}}我们在 src/worker
目录存放运行在主线程沙箱中的js代码。新建 src/worker/code.ts
,内容如下:上述代码中缺少 figma
的 ts 类型声明,所以我们需要安装一下。npm i -D @figma/plugin-typings
修改 tsconfig.json
,添加 typeRoots
,这样 ts 代码就不会报错了。同时也要加上 "skipLibCheck": true
,解决类型声明冲突问题。Figma 插件需要的构建产物有:manifest.json
文件作为插件配置index.html
作为UI代码code.js
作为主线程js代码public
目录中的文件都会负责到构建产物 dist
目录下。默认情况下 vite
会用 index.html
作为构建入口,里面用到的资源会被打包构建。我们还需要一个入口,用来构建主线程 js 代码。执行 npm i -D @types/node
,安装 Node.js
的类型声明,以便在 ts 中使用 Node.js
API。 vite.config.ts
的 build.rollupOptions
中增加 input
。默认情况下输出产物会带上文件 hash
,所以也要修改 output
配置:执行 npm run build
, dist
目录会有构建产物。然后我们按照前面的步骤,将 dist
目录添加为 Figma 插件。 Plugins
-> Development
-> Import plugin from manifest...
,选择 dist/manifest.json
文件路径。启动插件……怎么插件里一片空白?好在 Figma 里面有 devtools 调试工具,我们打开瞧一瞧。可以看到,我们的 index.html
已经成功加载,但是 js 代码没加载所以页面空白。js、css 等资源是通过相对路径引用的,而我们的 iframe
中的 src
是一个 base64
格式内容,在寻找 js 资源的时候因为没有域名,所以找不到资源。解决办法也很简单,我们给资源加上域名,然后本地起一个静态资源服务器就行了。修改 vite.config.ts
,加上 base: 'http://127.0.0.1:3000'
重新构建代码 npm run build
。然后启动静态资源服务器 npm run preview
。通过浏览器访问 http://localhost:3000/
可以看到内容。然后重新打开 Figma 插件看看。果然,插件已经正常了!Figma 加载插件只需要 index.html
和 code.js
,其他资源都可以通过网络加载。这意味着我们可以将 js、css 资源放在服务端,实现插件的热更?不知道发布插件的时候会不会有限制,这个我还没试过。我们已经能成功通过 Vue 3 来构建 Figma 插件了,但是我不想每次修改代码都要构建一遍,我们需要能够自动构建代码的开发模式。vite 自动的 dev 模式是启动了一个服务,没有构建产物(而且没有类似webpack里面的 writeToDisk
配置),所以无法使用。vite
的 build 命令有watch模式,可以监听文件改动然后自动执行 build
。我们只需要修改 package.json
, scripts
里新增 "watch": "vite build --watch"
。这种方式虽然修改代码后会自动编译,但是每次还是要关闭插件并重新打开才能看到更新。这样写UI还是太低效了,能不能在插件里实现 HMR
(模块热重载)功能呢?vite dev 的问题在于没有构建产物。 code.js
是运行在 Fimga 主线程沙箱中的,这部分是无法热重载的,所以可以利用 vite build --watch
实现来编译。需要热重载的是 index.html
以及相应的 js 、css 资源。
先来看一下 npm run dev
模式下的 html 资源有什么内容:理论上来说,我们只需要把这个 html 手动写入到 dist
目录就行,热重载的时候 html 文件不需要修改。直接写入的话会遇到资源是相对路径的问题,所以要么把资源路径都加上域名( http://localhost:3000
),或者使用 index.html
文件,发现只是增加了一个 。所以我们可以自己解析
index.html
,然后插入相应这个标签,以及一个
标签。解析 HTML 我们用 jsdom
。同时 vite 提供了 JavaScript API,所以我们可以代码组织起来,写一个 js 脚本来启动开发模式。新建文件 scripts/dev.js
,完整内容如下:执行 node scripts/dev.js
,然后在 Figma 中重启插件。试试修改一下 Vue 代码,发现插件内容自动更新了!免费云主机域名最后在 package.json
中新建一个修改一下dev的内容为 "dev": "node scripts/dev.js"
就可以了。前面通过自己生产 index.html
的方式有很大的弊端:万一后续 vite 更新后修改了默认 html 的内容,那我们的脚本也要跟着修改。有没有更健壮的方式呢?我想到可以通过请求 devServer
来获取 html 内容,然后写入本地。话不多说,修改后代码如下:“怎么使用Vue3开发Fimga插件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站,小编将为大家输出更多高质量的实用文章!
今天小编给大家分享一下vue事件总线取消了吗的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。 vue3取消了全局事件总线,废除原因是安全性低。全局…
免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。