如何導入和使用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語句：

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

請讓我知道這對你的作品。