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

Question

我正在尝试在一个Aurelia项目中使用PhotoSwipe，但是找不到一种方法来让它工作。

在我的捆绑包下的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';

我用来打开图库的代码(刚从getting started doc复制过来)

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:photoswipe@4.1.1/dist/photoswipe-ui-default.min.js'; // Cannot find module

我被蒙在鼓里，我的试验和错误的方法解决这个问题是行不通的。

我遗漏了什么？

Answer 1

您需要更改您的配置。您将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文件加载某些内容的图像文件。Aurelia CLI的当前限制是它打破了这类东西。这个问题应该在最终发布之前修复。但是现在，您需要使用link元素加载CSS。

  <!-- 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">

请让我知道这对你是否有效。