Импорт библиотеки Javascript в TypeScript для StencilJs

Question

Я включил в свой проект следующую библиотеку js: Particles.js . Теперь в моем компоненте я импортирую его и загружаю так:

import { Component, h } from '@stencil/core';
import * as particlesJS from 'particles.js';

@Component({
    tag: 'app-home',
    styleUrl: 'app-home.css'
})
export class AppHome {

    componentDidLoad() {
        particlesJS.load('particles-js', 'assets/particlesjs-config.json', function() {
            console.log('callback - particles.js config loaded');
        });
    }

    render() {
        return (
            <div id="particles" class='app-home w-full h-full fixed bg-blue-200'>

            </div>
        );
    }
}

Теперь проблема заключается в том, что когда я строю и запускаю свой код, я получаю следующую ошибку:

TypeError:"undefined не является функцией"

particlesJS всегда кажется неопределенным по какой-то причине, даже если я импортировал его сверху.

Answer 1

particles.js не экспортирует никакие переменные, но вместо этого устанавливает переменную для глобального объекта window, поэтому вы не можете импортировать его следующим образом. Вместо этого попробуйте

import 'particles.js';

. Затем вы можете получить к нему доступ непосредственно из объекта window:

window.particlesJS.load(...)

Проблема, связанная с данной: https://github.com/VincentGarreau/particles.js/issues/265

Answer 2

Вы можете импортировать функции js в файл ts с помощью require, помогая

const particlesJS = require('./particles');

Но все функции должны быть экспортированы как module.exports в частиц.js