在Svelte中使用Treant树形绘图库的技术问题咨询

背景与已完成步骤 #

熟悉基础Svelte、JS/TS及Web开发，尝试在SvelteKit中创建<TreeComponent>组件使用Treant树形绘图库，已完成以下操作：

• 执行npm create svelte@latest创建骨架项目，选择JS版本
• 安装uuid：npm install uuid
• 安装treant：npm install treant
• 修改主页面+page.svelte并创建组件lib/TreeComponent.svelte

主页面代码（+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>

遇到的问题 #

问题1：uuid类型警告 #

VS Code提示：

Could not find a declaration file for module 'uuid'. 'c:/Users/******/Downloads/treant-mwe/node_modules/uuid/dist/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/uuid if it exists or add a new declaration (.d.ts) file containing declare module 'uuid'; js(7016)

浏览器中组件可正常渲染，但希望消除编译警告，是否需要处理？

问题2：Treant导入触发window未定义错误 #

取消注释import {treant} from '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，不兼容SvelteKit的SSR？还是操作有误？

问题3：Treant依赖与资源缺失 #

安装treant后，node_modules/treant中找不到Treant.css、压缩版JS，也未自动安装raphael依赖，是否需要额外步骤？

解决方案 #

问题1：uuid类型警告处理 #

类型警告不影响运行，但要消除的话有两种方式：

1. 安装uuid的类型声明包：

npm install --save-dev @types/uuid

2. 若不想安装类型包，在项目根目录创建src/global.d.ts文件，添加：

declare module 'uuid';

重启VS Code后警告即可消失。

问题2：window未定义（SSR兼容问题） #

你的推测正确，Treant在导入阶段直接访问window，而SvelteKit默认服务端渲染时无window对象，导致报错。解决方式是仅在客户端加载Treant：

修改TreeComponent.svelte，利用Svelte的onMount钩子动态导入：

<script>
    import { v4 as uuid_v4 } from 'uuid';
    import { onMount } from 'svelte';
    export let data;
    let id = uuid_v4();

    onMount(async () => {
        // 动态导入Treant，确保仅在客户端执行
        const Treant = (await import('treant')).default;
        // 先加载Raphael依赖（需提前安装）
        await import('raphael');
        // 初始化树形图
        new Treant({
            chart: {
                container: `#${id}`
            },
            nodeStructure: data
        });
    });
</script>

<div {id}></div>

也可以给组件添加ssr="false"属性，强制组件仅在客户端渲染：

<TreeComponent {data} ssr="false" />

问题3：Treant依赖与资源缺失 #

npm上的treant包并非官方维护的完整版本，建议直接从官网下载完整资源：

1. 下载官网压缩包，取出Treant.css、Treant.min.js和vendor/raphael.js
2. 将这些文件放入项目的static文件夹
3. 在+layout.svelte中引入CSS：

<link rel="stylesheet" href="/Treant.css">

4. 手动安装raphael依赖：

npm install raphael

内容的提问来源于stack exchange，提问作者Holly