ვერცანაირად ვერ ვქმნი Animejs ბიბლიოთეკას მუშაობისთვის ჩემს TypeScript & Webpack პროექტში

ახლახანს გადავედი ES5-დან TypeScript-სა და Webpack-ზე. ჩემი სურვილია ვიყო Threejs ბიბლიოთეკის გამოყენება (ამაში ჯერ პრობლემა არ არის!) და Animejs ბიბლიოთეკის გამოყენება მისი შესანიშნავი ტაიმლაინური ანიმაციის ფუნქციებისთვის. გუშინ მთელი დღე დავხარჯე იმისთვის, რომ ეს მუშაობა დაყენებოდა (გიცნობთ სცენას: 30+ ტაბი გადაღებული). დავინახე ინსტრუქციები Animejs დოკუმენტაციაში,

npm install 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';

ეს არის ის, რასაც personally ვიყენებ რეგულარულად. ასევე მე არ ვიყენებ @types/animejs, ამიტომ მგონია შეგიძლია უსაფრთხოდ გაუკვირდე პაკეტი.