JSPM + TypeScript + PhotoSwipe :如何成功导入和使用库？

Question

我试图在我的JSPM和TypeScript项目中使用PhotoSwipe库，但没有成功(我在这里流血。))。

使用来自PhotoSwipe的DefinitelyTyped修改后的版本定义文件(最初的“未定义的PhotoSwipe”没有工作)，我得出了如下结论：

declare var PhotoSwipe: PhotoSwipe.IPhotoSwipeStatic;
declare var PhotoSwipeUI_Default: PhotoSwipeUI_Default.IPhotoSwipeUI_DefaultStatic;

declare module PhotoSwipe {
    ...
    interface IPhotoSwipeStatic {

        new <T extends Options> (pswpElement: HTMLElement,
            uiConstructor: (new (pswp: PhotoSwipeInstance<T>, framework: UIFramework) => UI<T>) | boolean,
            items: PhotoSwipe.Item[],
            options: T): PhotoSwipeInstance<T>;
    }
}

declare class PhotoSwipeInstance<T extends PhotoSwipe.Options> {
    ...
}


declare module PhotoSwipeUI_Default {
    ...
    interface IPhotoSwipeUI_DefaultStatic {

        new (pswp: PhotoSwipeInstance<Options>, framework: PhotoSwipe.UIFramework): PhotoSwipeUI_DefaultInstance;
    }
}

declare class PhotoSwipeUI_DefaultInstance implements PhotoSwipe.UI<PhotoSwipeUI_Default.Options> {
    ...
}

试图导入它时，我似乎无法理解如何使用以下方法创建PhotoSwipe实例：

const photoSwipe = new PhotoSwipe(pswpElement, PhotoSwipe.PhotoSwipeUI, items, options);

1)

declare module "photoswipe" {
    export = { PhotoSwipe, PhotoSwipeUI_Default };
}

import "photoswipe"; => I get ReferenceError: PhotoSwipe是未定义的

2)

declare module "photoswipe" {

    export var PhotoSwipe: PhotoSwipe.IPhotoSwipeStatic;
    export var PhotoSwipeUI_Default: PhotoSwipeUI_Default.IPhotoSwipeUI_DefaultStatic;
}

import { PhotoSwipe, PhotoSwipeUI_Default } from "photoswipe"; => I get TypeError: photoswipe_1.PhotoSwipe不是构造函数

有人吗？

Answer 1

我知道可能很晚了，但有个解决办法：

require([ 
        'path/to/photoswipe.js', 
        'path/to/photoswipe-ui-default.js' 
    ], function( PhotoSwipe, PhotoSwipeUI_Default ) {

    //      var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default ...
    //      gallery.init() 
    //      ...

});

源- http://photoswipe.com/documentation/getting-started.html

另外，请不要忘记在导入之前导入一些文件：

import 'photoswipe/dist/photoswipe.css';
import 'photoswipe/dist/default-skin/default-skin.css';

我试着用TypeScript的方式来处理全局类型，并且简单地说：

import { PhotoSwipe, PhotoSwipeUI_Default } from 'photoswipe';

但没起作用。我和你犯了同样的错误。

祝好运!

是的，我和webpack一起测试过，但没有用JSPM。

Answer 2

npm install photoswipe
npm install --save @types/photoswipe

安装光擦拭和它的类型定义从npm。

import photoSwipe from 'photoswipe'

然后可以使用上面的import语句使用它。

希望这能帮上忙。

Answer 3

安装设备：

npm i photoswipe
npm i -D @types/photoswipe

用它来搭配：

import PhotoSwipe from 'photoswipe'
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'