Как импортировать и использовать PhotoSwipe с Aurelia/Typcript?

Question

Я пытаюсь использовать PhotoSwipe в проекте 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'; 

Код, который я использую для открытия галереи (только что скопирован из 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(); 
} 

Проект Аурелия строит нормально, но во время выполнения я получаю эту ошибку:

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 заключается в том, что он нарушает подобные вещи. Это должно быть исправлено до окончательной версии. Но на данный момент вам нужно загрузить CSS с помощью link элементов.

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

Пожалуйста, дайте мне знать, если это сработает для вас.