使用Webpack与JQuery插件

Question

使用Webpack与JQuery插件

3

我正在尝试在Webpack中使用插件Galleria。如果没有Webpack，可以这样使用Galleria：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.4.min.js"></script>

<script>
  (function() {
    Galleria.loadTheme('https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js');
    Galleria.run('.galleria');
  }());
</script>

主题也可以手动加载，而不是使用loadTheme方法：

<link rel=”stylesheet” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/fullscreen/galleria.classic.min.css” />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>   
<script src=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js”></script>

<script>
  (function() {
    Galleria.run('.galleria');
  }());
</script>

我使用 WebPack 在 Index.js 中添加了以下代码：

import galleria from 'galleria';

import '../../node_modules/galleria/dist/themes/classic/galleria.classic.css';
import '../../node_modules/galleria/dist/themes/classic/galleria.classic.js';

window.Galleria = galleria; 

(function() {
  Galleria.run('.galleria');
}());

当我运行它时，我遇到了以下错误：

No theme CSS loaded.

Init failed: Galleria could not find the element "undefined".

有没有想过如何在Webpack中使用Galleria？

- Miguel Moura

1

从Galleria网站的常见问题解答中可以得知：“Galleria与webpack不兼容 - 如果你正在使用webpack，你需要使用shimming，因为Galleria需要访问window.location对象：”https://galleria.io/docs/references/faq.html - Brett Gregson

是的，我通过在Webpack中添加规则来实现，但仍然无法正常工作。 - Miguel Moura

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nickbullock · Accepted Answer

我为你创建了一个使用webpack和Galleria的简单存储库。
步骤如下：

按照这里的说明使用shimming：

            {
                test: /galleria.js$/,
                loader: "imports-loader?this=>window"
            },

将jquery和galleria添加为项目依赖项：npm i -S jquery galleria
使用loadTheme和run Galleria方法：

import * as $ from 'jquery';
import galleria from 'galleria';

window.Galleria = galleria;
window.jQuery = $;

Galleria.loadTheme('node_modules/galleria/dist/themes/classic/galleria.classic.js');
Galleria.run('.galleria');

要查看项目的运行情况，请运行npm run start。

更新：
要复制压缩的主题文件，您可以使用CopyWebpackPlugin：

npm i -D copy-webpack-plugin
将其添加到webpack插件中：

plugins: [
        new CopyWebpackPlugin([
            { from: 'node_modules/galleria/dist/themes/classic/galleria.classic.min.js', to: 'assets/galleria.classic.js' },
            { from: 'node_modules/galleria/dist/themes/classic/galleria.classic.min.css', to: 'assets/galleria.classic.css' },
        ])
]

更改loadTheme调用中的路径：Galleria.loadTheme('assets/galleria.classic.js');

UPD2:
使用webpack imports更新存储库。请参见此PR或此分支中的区别。主要更改如下：

我们仍然需要使用copy-webpack-plugin将galleria.classic.css文件作为<link rel="stylesheet" type="text/css" href="assets/galleria.classic.css">使用，并加载，因为在源代码中发现只能通过link或script标签或动态地（loadTheme调用）加载css，否则将打印No theme css loaded。
1. 但是，我们的JavaScript代码变得非常简单。我还删除了使用imports-loader的webpack规则，并在内联样式中使用它。

import * as $ from 'jquery';
import * as Galleria from 'galleria'
import 'imports-loader?define=>false!./node_modules/galleria/src/themes/classic/galleria.classic';

Galleria.run('.galleria');