无法让 Animejs 库在我的 typescript 和 webpack 项目中工作

Question

我最近从 ES5 切换到 typescript 和 webpack。我的愿望是使用 Threejs 库（目前还没有问题。）和 Animejs 库用于其花哨的时间轴 animation 功能：昨天花了一整天试图让它工作（你知道钻。打开 30 多个选项卡），我按照 Animejs 文档中的说明进行操作，

npm 安装 animejs --save

然后

import anime from 'animejs/lib/anime.es.js';

...我得到了错误：

找不到模块“animejs/lib/anime.es.js”的声明文件

我确保它们是使用以下命令安装的：

npm i --save-dev @types/animejs

我检查了@types 文件夹，那里有一个带有 index.d.ts 文件的 Animejs 文件夹。 我还检查了 tsconfig 并检查此文件夹中的声明文件。

{
    "compilerOptions": {
        "moduleResolution": "node",
        "strict": true
    },
    "typeRoots": [
        "./node_modules/@types/"
    ],
    "noImplicitAny": false,
    "include": ["**/*.ts", "test"]
}

经过一番谷歌搜索后，我发现如果我只是更改实现方法，错误就会得到解决。 Animejs 的文档说它应该如下所示：

import anime from 'animejs/lib/anime.es.js';

我将其更改为：（错误消失了）

import * as anime from 'animejs';

现在我显然是这个新管道的新手，我几乎看不出这有什么不同。 但是我现在有一个新问题：当我声明一个新的动漫 animation 时（下面的示例代码来自 Animejs 的文档）..

anime({
  targets: '.css-selector-demo .el',
  translateX: 250
});

..它确实可以编译，但我在 JS 控制台中收到错误消息（使用 Chrome）

未捕获的类型错误：动漫不是 function

现在我迷路了。 也没有同事可以问。 请帮忙！

Answer 1

尝试这个

import anime from 'animejs';

这是我个人经常使用的。 我也不使用@types/animejs ，所以我认为您可以安全地卸载 package。

Answer 2

正确的。 感谢到目前为止的帮助，我最终确实弄明白了。 的种类。 所以我所做的就是使用这一行来导入它

import anime from 'animejs/lib/anime.es.js';

然后我卸载并重新安装了 animejs 框架，包括它的@types。 这就是我的 tsconfig.json 现在的样子（在朋友的帮助下，我在这里也做了一些更改）。

{
    "compilerOptions": {
        "moduleResolution": "node",
        "strict": true, 
        "allowJs": true,
    },
    "typeRoots": [
        "../node_modules/@types/"
    ],
    "noImplicitAny": false,
    "include": ["**/*.ts", "test"]
}

我不完全确定是哪个更改起作用了，但确实起作用了。 希望任何为同样的问题而苦苦挣扎的人都会觉得这很有用！