@fluixi/vite-plugin (英语)
Fluixi 的 Vite 插件: 编译 JSX 和 html 模板.
* 概览
@fluixi/vite-plugin 设置建置 jsxImportSource 并运行 Fluixi 编译
(通过) @fluixi/compiler: 联合来文X和 html`...` 两者,直入
@fluixi/dom 运行时间电话。 它重写已存在的源, 因此输出带有源
地图和孔保留作者所写的文字。 没有Bayl装的.
@fluixi/core
再出口 fluixi编号 :createVitePlugin 从这里,和 @fluixi/start 电线
在自动中:直接为平原(非元框)使用此插件.
* 安装
pnpm add -D @fluixi/vite-plugin
使用量
import { defineConfig } from 'vite';
import { fluixi } from '@fluixi/vite-plugin';
export default defineConfig({
plugins: [
// JSX and html`` templates both compile straight into @fluixi/dom runtime
// calls (createNativeElement/spread/insert/…). No options required.
fluixi(),
],
});
QQ 选项
选项是 @fluixi/compiler是因为 CompilerOptions数字 :
| 选项 | 默认 | 什麽 |
|---|---|---|
importSource | @fluixi/jsx | 联合来文十 类型 来源;以及 jsxImportSource 给建造 |
format | both | 用于编译的语法 : jsx, (中文(简体) ), html,或 both |
signalModule 编号 : controlFlowModule | @fluixi/dom | 发射的运行时符号来自何处 |
resolve | - 说吧 | 从赤色标签中导入组件的规则 |
globals | fluixi.d.ts | 将生成的环境类型(解析组件和 $signal- 风格的内在). false 跳过它 |
propsDestructure | true | 将组件的解结构道具重写成属性读取,所以 function Card({ title }) 不断更新。 无法证明的图案被保留下来 关上一个包裹 运送源头 |
templateClone 编号 : partialTemplates | true | 克隆静态子树,而不是建树 |
delegateEvents | true | 代表团 |
sourceMaps | true | 发送源地图 |
babel | false | 转而通过 Babel 前端编译,用于一个其自己的 Babel 插件必须查看输出的项目. 需求 @babel/core,这是一个可选的对等点 |
devtools | 在 dev 中显示 | 服务运行中的应用程序的活性图形,并标记每个节点创建的地方. { external: true } 标记依赖性也 |
* 反应图
插件在开发模式的页面上添加了一个小代理, 它报告反应图 GET /__fluixi/graph。这个图表作为普通的JSON提供,因此很容易在编辑器扩展或面板等工具中读取和使用。 代理机与插件相伴而来,因此一个项目不需要安装其他设备;只有框架本身从项目中解决,因为观看运行时间的第二个拷贝会观看一个没有用的图.
以下是您如何配置插件 :
// vite.config.ts
plugins: [fluixi()], // graph on in dev
plugins: [fluixi({ devtools: false })], // off
plugins: [fluixi({ devtools: { external: true } })], // dependencies too
图表中的每个节点都包含它创建时的文件,行和列,相对于工程根命名. 默认情况下,来自依赖关系的节点没有被标记,这可以保持图表对您正在编辑的代码的关注.
这个 external 选项对框架本身的工作有用。 它标志着节点从 node_modules 项目根外为 external,允许您看到哪些节点是由图书馆创建的,哪些是由您的应用程序创建的。 应用程序的调用站点优先于创建节点的包装器,所以 count 显示为您所写的行,而不是里面的行 signal()。 。 。 .