时间戳

首页 > 解决方案 > 在 Webpack 中使用 JQuery 插件

jquery - 在 Webpack 中使用 JQuery 插件

问题描述

我正在尝试将插件Galleria与 Webpack 一起使用。没有 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”&gt;</script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/themes/classic/galleria.classic.min.js”&gt;</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".

知道如何将 Galleria 与 Webpack 一起使用吗？

标签： jquerywebpackgalleria

解决方案

使用 webpack 和 Galleria 为您创建了一个简单的repo 。
步骤是：

  1. shimming按照此处记录的方式使用： 
            {
                test: /galleria.js$/,
                loader: "imports-loader?this=>window"
            },
  1. 将jquery和galleria作为依赖项添加到您的项目中： npm i -S jquery galleria
  2. 使用方法loadTheme和runGalleria方法：
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 的 repo imports。请查看此PR或此分支中的差异。主要变化是：

  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. 但是随后我们的 javascript 代码变得非常简单。我还删除了 webpack 规则imports-loader并以内联样式使用它。
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');

推荐阅读