我最近从 ES5 切换到了 typescript 和 webpack。我的愿望是使用 Threejs 库(还没有问题!)和 Animejs 库来实现其精美的时间轴动画功能。昨天花了一整天的时间试图让它工作(你知道该怎么做:打开了 30 多个标签)。我按照 Animejs 文档中的说明进行操作,
npm install animejs --save
然后
import anime from 'animejs/lib/anime.es.js';
...我收到错误:
Could not find a declaration file for module '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)
Uncaught TypeError: anime is not a function
现在我迷路了。也没有同事可以问。请帮忙!
最佳答案
对!感谢你目前的帮助。我最终确实明白了,有点。 所以我所做的就是使用这一行来导入它
import anime from 'animejs/lib/anime.es.js';
然后我卸载并重新安装了animejs框架,包括它的@types。这就是我的 tsconfig.json 现在的样子(在 friend 的帮助下,我也在这里做了一些更改)。
{
"compilerOptions": {
"moduleResolution": "node",
"strict": true,
"allowJs": true,
},
"typeRoots": [
"../node_modules/@types/"
],
"noImplicitAny": false,
"include": ["**/*.ts", "test"]
}
我不完全确定是哪个更改起到了作用,但它确实起到了作用。 希望遇到同样问题的任何人都会发现这很有用!
关于typescript - 无法让 Anime Js 库在我的 typescript 和 webpack 项目中工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72405668/