无法让 Animejs 库在我的打字稿和 webpack 项目中工作

Question

我最近从ES5切换到typescript和webpack。我的愿望是使用Threejs库(没有问题，但!)和Animejs库的花式时间轴动画功能。昨天花了一整天的时间试图让它工作(你知道的钻:30多个标签打开)。我按照Animejs文档中的说明，

npm install animejs——save

然后

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

…我得到了错误:

找不到模块'animejs/lib/animation .es.js'的声明文件

我确保它们是用命令安装的:

npm i—save-dev @types/animejs

我检查了@types文件夹，那里有ís一个Animejs文件夹，里面有一个index. d.s文件。我还检查了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)

Uncaught TypeError: anime is not a function

现在我迷失了。也没有任何同事可以问。请帮助!

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

我不完全确定是哪个变化起了作用，但它确实起了作用。希望任何遇到同样问题的人都能发现这很有用!

Answer 2

试试这个

import anime from 'animejs';

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