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

Posted 2023-02-19

【中文标题】JSPM + TypeScript + PhotoSwipe：如何成功导入和使用库？

【英文标题】：JSPM + TypeScript + PhotoSwipe : How to successfully import and use the library?

【发布时间】：2016-07-09 19:34:48

【问题描述】：

我正在尝试在我的 JSPM 和 TypeScript 项目中使用 PhotoSwipe 库但没有成功（我在这里流血......）。

使用来自DefinitelyTyped 的 PhotoSwipe 的修改版本定义文件（原始版本不起作用 - 得到“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"; => 我得到 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"; => 我得到 TypeError: photoswipe_1.PhotoSwipe 不是构造函数

有人吗？

【参考方案1】：

安装部门：

npm i photoswipe
npm i -D @types/photoswipe

使用它：

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

【参考方案2】：

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

从 npm 安装 photoswipe 和它的类型定义。

import photoSwipe from 'photoswipe'

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

希望这会有所帮助。

【参考方案3】：

我知道可能已经晚了，但这里有解决方案：

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

但它没有用。我遇到了和你一样的错误。

祝你好运！

PS - 是的，我使用 webpack 进行了测试，但没有使用 JSPM。