Question

我模块化我的前端构建如下： https://github.com/dimsemenov/PhotoSwipe/blob/master/dist/photoswipe.js

每个组件的文件夹都包含.css和.js（在html中）文件夹）。
所有依赖项库都会进入vendor.js。
所有.js组件＆＃39;文件编译成bundle.js。

- vendor.js dev-mode：

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库的组件photoswipe示例：

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();

正如您在上面的代码中所看到的，我使用new PhotoSwipe(...)

初始化了库

浏览器遇到错误并告诉我：＆＃34;未捕获的ReferenceError：未定义PhotoSwipe＆＃34;

注意： vendor.js文件包含在bundle.js之前，所以很奇怪它为什么看不到PhotoSwipe变量

PhotoSwipe库代码：{{3}}

如何初始化PhotoSwipe功能的新实例？

Answer 1

PhotoSwipe是一个AMD模块，我无法将其作为CommonJS导入。

导入javascript库/模块说它未定义

1 个答案: