如何通过 Aurelia / Typescript 导入和使用 PhotoSwipe？

我正在尝试使用照片滑动 http://photoswipe.com/在 Aurelia 项目中，但找不到使其工作的方法。

在捆绑包下的 aurelio.json 中，我有：

{
    "name": "photoswipe",
    "path": "../node_modules/photoswipe/dist/",
    "main": "photoswipe.min",
    "resources": [
        "photoswipe-ui-default.min.js",
        "photoswipe.css",
        "default-skin/default-skin.css"
    ]
}

在我的 package.json 中，我有：

"@types/photoswipe": "^4.0.27",
"photoswipe": "^4.1.1"

在我的 .ts 模块中，我有

import PhotoSwipe from 'photoswipe';

我用于打开画廊的代码（刚刚从入门文档 http://photoswipe.com/documentation/getting-started.html)

imageClicked() { 

    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
            src: 'https://placekitten.com/600/400',
            w: 600,
            h: 400
        },
        {
            src: 'https://placekitten.com/1200/900',
            w: 1200,
            h: 900
        }
    ];

    // define options (if needed)
    var options = {
        // optionName: 'option value'
        // for example:
        index: 0 // start at first slide
    };

    // Initializes and opens PhotoSwipe
    var gallery = new PhotoSwipe<PhotoSwipeUI_Default.Options>(pswpElement as HTMLElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
}

aurelia 项目构建正常，但运行时我收到此错误：

Uncaught ReferenceError: PhotoSwipeUI_Default is not defined

我尝试将导出添加到 aurelia.json 包中

"exports": [ "PhotoSwipe", "PhotoSwipeUI_Default" ]

这并没有改变任何事情。

我尝试了各种导入语句：

import PhotoSwipeUI_Default from 'photoswipe'; // Now PhotoSwipeUI_Default is of type PhotoSwipe
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default' // Module not found compile error
import PhotoSwipeUI_Default from 'npm:[email protected] /cdn-cgi/l/email-protection/dist/photoswipe-ui-default.min.js'; // Cannot find module

我一无所知，我解决这个问题的反复试验方法毫无进展。

我缺少什么？

您需要更改您的配置。您将 Aurelia 指向显然导致问题的缩小文件。让 CLI 处理 JS 文件的缩小。

{
  "name": "photoswipe",
  "path": "../node_modules/photoswipe/dist/",
  "main": "photoswipe",
  "resources": [
    "photoswipe-ui-default.js"
  ]
}

然后您可以使用导入

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

此外，photoswipe css 文件会加载某些内容的图像文件。 Aurelia CLI 当前的一个限制是它破坏了这类事情。这应该在最终版本之前修复。但现在，您需要使用以下命令加载 CSSlink元素。

  <!-- Core CSS file -->
  <link rel="stylesheet" href="node_modules/photoswipe/dist/photoswipe.css">

  <!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
  <link rel="stylesheet" href="node_modules/photoswipe/dist/default-skin/default-skin.css">

请告诉我这是否适合您。