使用 treant 与 svelte

Question

我正在尝试使用 svelte 的 treant 树绘图库。据我所知，我对基本的 svelte 和 JS/TS 以及 Web 开发没问题，但我似乎缺少一些关键的信息，不知道如何组合在一起。

根据https://fperucic.github.io/treant-js/，我需要包括

Treant.css

、

vendor/raphael.js

和

Treant.min.js

。我还需要为要挂载树的每个元素提供唯一的 ID。如果我只是手动编码到 HTML/JS 文件中，这一切都可以正常工作。

所以，我想做一个苗条的

<TreeComponent>

。到目前为止的步骤：

• npm create svelte@latest

• 输入“骨架项目”和“js”，让事情变得更容易； cd 到文件夹

• npm install uuid

  对于 ids（可能有点过分，但绝对应该有效）

• npm install treant

• npm install

• npm run dev

主要

+page.svelte

我将内容更改为：

<script>
    import TreeComponent from "$lib/TreeComponent.svelte";
    const data = {
        text: "a",
        children: [
            {text: "b"},
            {text: "c"}
        ]
    }
</script>
<h1>Welcome to SvelteKit</h1>

<TreeComponent {data}/>

并创建

lib/TreeComponent.svelte

:

<script>
    import {v4 as uuid_v4} from 'uuid'
    // import {treant} from 'treant'
    export let data
    let id = uuid_v4()
</script>

<div {id}></div>

VS code 对我抱怨 uuid 导入行：

找不到模块“uuid”的声明文件。 'c:/Users/******/Downloads/treant-mwe/node_modules/uuid/dist/index.js' 隐式具有 'any' 类型。尝试

npm i --save-dev @types/uuid

（如果存在）或添加包含

declare module 'uuid';

js(7016)

的新声明 (.d.ts) 文件

我需要对此做些什么吗？当我在浏览器中签入时，它会很好地呈现具有唯一 ID 的组件。但我喜欢我的东西在没有警告的情况下编译。

真正的问题是，如果我取消对 treant 行的注释，它会崩溃

ReferenceError: window is not defined
    at Object.<anonymous> (C:\Users\******\Downloads\treant-mwe\node_modules\treant\src\Internals.js:12:9)       
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (C:\Users\******\Downloads\treant-mwe\node_modules\treant\src\register.js:3:17)        
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)

我认为这是因为 treant 在初始化时尝试访问

window

，而不是在调用它时（

new Treant(...)

）。这是否意味着这个库不能与 svelte 的服务器端渲染一起使用，因为我什至无法导入该内容以便稍后在

onMount

中调用它？或者我在这里得到了一些更基本的错误？

我还注意到，在

node-modules/treant

子文件夹中，没有

Treant.css

也没有缩小版本的 js 文件。我需要在这里额外的构建/安装步骤，还是其他什么？我似乎也找不到

raphael

依赖项，即使我做了

npm install

。

编辑：如果您想知道，我还没有尝试在这个最小的示例中创建实际的树，因为我仍然停留在加载库上。

Answer 1

这是否意味着这个库不能与 svelte 的服务器端渲染一起使用，因为我什至无法导入该东西以便稍后在

onMount

中调用它？

此错误中提到的文件在顶层有这段代码：

var defaultEventDefinition = {
  detail: null,
  view: window, // <--
  bubbles: true,
  cancelable: true
}

所以，是的，这与 SSR 不兼容，您可以将其关闭或在

import()

中执行动态

onMount

来解决该问题。

---

只需按照安装

uuid

的建议即可解决

@types/uuid

导入问题。