无法在 Ionic-Angular 项目中导入 AnimeJS

Question

我在我的 Ionic 4 项目中使用以下命令安装了 AnimeJS：

npm i animejs --save
npm i @types/animejs --save

然后我尝试使用以下方式引用它：

import * as anime from 'animejs'

当从 animejs 调用任何东西时，执行上述操作会出现以下错误：

Error: Uncaught (in promise): TypeError: Object is not a function (near '...animejs__WEBPACK_IMPORTED_MODULE_1__...')

但是，如果我通过引用 node_modules 目录中的 anime.js 进行导入，一切都会按预期进行。我想通过安装 @types/animejs 这将允许我只使用一个简单的 import * as anime from 'animejs' 而不必直接引用 node_modules 目录中的文件。

为什么我可以使用 node_modules 文件夹而不是 import * as anime from 'animejs'

导入

导入后我这样称呼它：

  openModal(modalPage) {
    // Define modal to open
    switch (modalPage) {
      case 'login' : {
        modalPage = LoginPage;
        break;
      }
      case 'register' : {
        modalPage = RegisterPage;
        break;
      }
    }

    // Open modal
    this.modalCtrl.create({
      component: modalPage,
      cssClass: 'intro-modal',
      showBackdrop: true,
      enterAnimation: this.animations.modalEnter
    }).then(modal => {
      // Hide intro buttons
      anime({
        targets: ['.intro-buttons'],
        translateX: '-100%',
        duration: 150,
        easing: 'linear'
      });

      // Animate slide back
      modal.onWillDismiss().then(() => {
        anime({
          targets: ['.intro-buttons'],
          translateX: '0%',
          duration: 150,
          easing: 'linear'
        });
      });

      // Present the modal
      modal.present();
    });
  }

Answer 1

将您的导入更新为以下内容：

import anime from 'animejs'

这将从 animejs 导入 default 导出，这实际上是一个接受您试图传递的 params/object 的函数。

这是一个 example 的动作，显示了导入并将预期的对象传递给 anime() 而没有触发错误。

使用您现有的导入 * as anime，如果您登录 anime，您将看到该对象的属性 default，这就是您需要的实际功能.您还会看到 import 引入了其他各种 properties/functions，包括 penner、stagger 和 timeline。您只是在之前的导入中定位了错误的属性。

希望对您有所帮助！

无法在 Ionic-Angular 项目中导入 AnimeJS

Cannot import AnimeJS in Ionic-Angular project

node.js

angular

npm

anime.js