Webpack 需要其他库

Question

我正在尝试让我的资产与 webpack 配置一起使用。

我已经将我所有的 JS 从一个大的 .js 文件拆分成单独的文件，其中包含一个主 application.js 文件，require 包含它们。

现在这些文件之一：- gallery.js 需要 PhotoSwipe 库。我把它安装在我的 node_modules 目录和 gallery.js 的顶部我有：

require('photoswipe/dist/photoswipe.min');
require('photoswipe/dist/photoswipe-ui-default.min');

但是当运行页面时，在控制台中我得到：

gallery.js?a942:77 Uncaught ReferenceError: PhotoSwipe is not defined
    at openPhotoSwipe (gallery.js?a942:77)
    at HTMLAnchorElement.eval (gallery.js?a942:89)
    at HTMLAnchorElement.dispatch (vendor.js:5530)
    at HTMLAnchorElement.elemData.handle (vendor.js:5338)

任何人都可以指出我出错的方向，以便我可以修复 PhotoSwipe 的不确定性吗？

谢谢，尼尔

Answer 1

你可以做两件事来完成这项工作。

将 required 库分配给变量并在任何需要的地方使用它，

var PhotoSwipe = require('photoswipe');
var PhotoSwipeUIDefault = require('photoswipe/dist/photoswipe-ui-default');

使用ProvidePlugin填充PhotoSwipe变量，

plugins: [
   new webpack.ProvidePlugin({
      PhotoSwipe: 'photoswipe',
      PhotoSwipeUI_Default: 'photoswipe/src/js/ui/photoswipe-ui-default.js'
  })
]

Webpack 需要其他库

Webpack require other libraries

photoswipe

webpack