が、それは私が私のフロントエンドがそうのように構築するモジュール化

Question

未定義だと言う： printscreen

• すべてのコンポーネントは、（HTML フォルダ内の）その.cssと.jsでそのフォルダを持っています。

• すべての依存関係ライブラリはvendor.jsにあります。

• すべての.jsコンポーネントのファイルはすべてbundle.jsにコンパイルされます。

- DEV-モードvendor.js：あなたは私上記のコードで見たよう

export default class Five { 
    constructor() { 
     console.log('Five'); 
     this.init_PhotoSwipe(); 
    } 
    init_PhotoSwipe() { 
     var pswpElement = document.querySelectorAll('.pswp')[0]; 
     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(pswpElement, PhotoSwipeUI_Default, items, options); 
     gallery.init(); 
    } 
}; 

const five = new Five(); 

：私はphotoswipeライブラリを初期化

import $ from 'jquery'; 
import './assets/Swiper-3.3.1/dist/js/swiper.min'; 
import './assets/twentytwenty/js/jquery.event.move'; 
import './assets/twentytwenty/js/jquery.twentytwenty'; 

import './assets/PhotoSwipe/dist/photoswipe'; 
import './assets/PhotoSwipe/dist/photoswipe-ui-default'; 

コンポーネントの.js例ライブラリを初期化するnew PhotoSwipe(...)

ブラウザがエラーに遭遇したと私に語っている：「キャッチされないのReferenceError：PhotoSwipeが定義されていません」：vendor.jsファイルが含まれているbundle.js前に、それはPhotoSwipeを見ることができない理由それは奇妙だ

注意変数。

PhotoSwipeライブラリコード：https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/photoswipe.js

にはどうすればPhotoSwipe機能の新しいインスタンスを初期化することができますか？

Answer 1

PhotoSwipeはAMDモジュールで、CommonJSとしてインポートできませんでした。