无法在我的 TypeScript 和 Webpack 项目中使用 Animejs 库

我最近从 ES5 转到了 TypeScript 和 Webpack。我希望使用 Threejs 库（到目前为止没问题！）以及 Animejs 库来使用它华丽的时间线动画功能。昨天整天都在尝试让它工作（你知道的套路：开了 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 文件夹，里面有一个 Animejs 文件夹，里面有一个 index.d.ts 文件。我也检查了 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';

既然我显然是这个新流程的初学者，我几乎看不出那有什么区别。但我现在有一个新问题：当我声明一个新的动漫动画时（下面的示例代码来自 Animejs 的文档）..

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

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

未捕获的类型错误：anime 不是一个函数

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

答案＃1

对！谢谢你到现在为止的帮助。我最终算是弄明白了，有点儿。所以我做的是用这一行来导入它

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"]
}

我不完全确定是哪个改动起了作用，但确实起作用了。希望正在为同样问题苦恼的人能觉得这有用！

答案＃2

试试这个

import anime from 'animejs';

这是我个人经常使用的。我也不使用 @types/animejs，所以我认为你可以放心卸载这个包。