与Webpack一起使用JQuery插件

Question

我试着用Webpack的插件盖丽亚。如果没有Webpack，盖丽亚可以被用作：

<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一起使用盖丽亚吗？

Answer 1

为您创建了一个简单的存储库与webpack和盖丽亚。

步骤如下：

1. 使用shimming作为文档化的这里：

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

1. 将jquery和galleria作为依赖项添加到项目中：npm i -S jquery galleria
2. 使用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。

UPD:

要复制缩小的主题文件，可以使用CopyWebpackPlugin

1. npm i -D copy-webpack-plugin
2. 将其添加到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' },
        ])
]

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

UPD2:

更新与webpack imports使用回购。请看这个按下或这个分支的不同之处。主要变化是：

1. 我们仍然需要galleria.classic.css文件与copy-webpack-plugin一起使用，并以<link rel="stylesheet" type="text/css" href="assets/galleria.classic.css">的形式加载，因为我在源代码中发现，css只能通过link或script标记加载或动态加载(loadTheme调用)，否则将打印No theme css loaded。

1. But then our javascript code becomes pretty simple. Also I removed webpack rule with `imports-loader` and used it in inline style.

​

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