無法在Ionic-Angular項目中導入AnimeJS

Question

我已經在Ionic 4項目中使用以下命令安裝了AnimeJS：

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

然后，我嘗試使用以下方法引用它：

import * as anime from 'animejs'

從animejs調用任何內容時，執行上述操作會給我以下錯誤：

錯誤：未捕獲（承諾）：TypeError：對象不是函數（'... 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'但不能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導出，該default導出實際上是一個函數，它采用您嘗試傳遞的params / object。

這是一個操作示例 ，顯示了導入並將預期對象傳遞給anime()而不觸發錯誤。

使用現有的import * as anime ，如果您登錄anime ，則會看到該對象的屬性default ，即您所需的實際功能。 您還將看到import引入了其他各種屬性/功能，包括penner ， stagger和timeline 。 您只是在先前的導入中定位了錯誤的屬性。

希望有幫助！