时间戳

首页 > 解决方案 > 为什么animejs在svelte-kit骨架项目的构建中抛出这个错误？

javascript - 为什么animejs在svelte-kit骨架项目的构建中抛出这个错误？

问题描述

我已经使用 npm 安装了animejs npm install animejs

<script>
    import anime from 'animejs';

    let heroTimeline = anime.timeline({autoplay: true});
    let heroAnimation = {
        targets: "#hero grow",
        opacity: {
            value: [0, 1],
            duration: 800,
            easing: 'easeOutExpo',
        },
        scale: {
            value: [0, 1],
            duration: 1000,
            easing: 'easeOutElastic(1, .8)',
        }
    }
</script>

此代码引发以下错误：

ReferenceError: window is not defined
    at makePromise (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:927:19)
    at anime (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:933:17)
    at Function.timeline (D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.js:1264:12)
    at index.svelte:4:39
    at Object.$$render (D:\Sync\Web\portfolio-website\node_modules\svelte\internal\index.js:1684:22)
    at Object.default (root.svelte:38:46)
    at Object.default (/src/routes/__layout.svelte:12:50)
    at eval (/src/lib/ThemeContext.svelte:46:41)
    at Object.$$render (D:\Sync\Web\portfolio-website\node_modules\svelte\internal\index.js:1684:22)
    at eval (/src/routes/__layout.svelte:11:100)

从'animejs/lib/anime.js'和导入时，我也遇到同样的错误'animejs/lib/anime.min.js'。如果我尝试从中导入，'animejs/lib/anime.es.js'则会收到以下错误：

D:\Sync\Web\portfolio-website\node_modules\animejs\lib\anime.es.js:1310
export default anime;
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at nodeRequire (D:\Sync\Web\portfolio-website\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:66556:17)
    at ssrImport (D:\Sync\Web\portfolio-website\node_modules\vite\dist\node\chunks\dep-85dbaaa7.js:66498:20)

关于如何解决它的任何想法。除此之外，该项目是 svelte-kit 生成的默认 svelte 骨架项目。

标签： javascriptsveltesveltekitanime.js

解决方案

尝试使用 onMount 函数为例：

<script>
    import { onMount } from 'svelte';
    import anime from 'animejs';

    onMount(() => {
        
        let heroTimeline = anime.timeline({autoplay: true});

</script>

在 onMount 函数中，您可以使用 vanilla javascrpt

推荐阅读