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

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

将require d库分配到变量中，并在需要的地方使用，例如

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需要其他库

1 个答案: