如何使用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';

我用于打开图库的代码（只是从入门文档中复制而来）

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 css文件会为某些内容加载图像文件。 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">

请让我知道这是否适合您。