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

如果这对你有用，请告诉我。

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

1 个答案: