使用 webpack 集成革命滑块

Question

我们正在尝试使用 webpack 将 HTML 模板与 angular 5 (jhipster) 集成。该模板使用 旋转滑块 并且与 HTML 完美配合。我们主要关心的是能够将 revolution slider 插件添加到 webpack。我们能够在我的脚本中添加一个入口点，如下图所示。

entry: {
        polyfills: './src/main/webapp/app/polyfills',
        global: './src/main/webapp/content/scss/global.scss',
        main: './src/main/webapp/app/app.main',
        script: './src/main/webapp/app/website/v/js/script'
    },

然后我们添加require标签来导入revolution依赖到我们的脚本(script.js)如下:

require('./jquery.themepunch.revolution.min');
require('./jquery.themepunch.tools.min');
require('./extensions/revolution.extension.actions.min');
require('./extensions/revolution.extension.carousel.min');
require('./extensions/revolution.extension.kenburn.min');
require('./extensions/revolution.extension.layeranimation.min');
require('./extensions/revolution.extension.migration.min');
require('./extensions/revolution.extension.navigation.min');
require('./extensions/revolution.extension.parallax.min');
require('./extensions/revolution.extension.slideanims.min');
require('./extensions/revolution.extension.video.min');
require('./main-slider-script');

滑块代码在 HTML 版本中可以在没有依赖项的情况下工作，但是当使用 webpack 时，jquery.themepunch.tools.min 不断要求 TweenLite 依赖项，因此我们必须将 webpack.common.js 中的 TweenLite 解析为下一个：

 resolve: {
        extensions: ['.ts', '.js'],
        modules: ['node_modules'],
        alias: {
            "TweenLite": "gsap/src/uncompressed/TweenLite"
        }
    }

但我们收到此错误

Uncaught ReferenceError: punchgs is not defined
    at jQuery.fn.init.revolution (jquery.themepunch.revolution.min.js?7c26:8)
    at HTMLDocument.eval (main-slider-script.js?aca9:12)
    at mightThrow (jquery.js?eedf:3583)
    at process (jquery.js?eedf:3651)
    at ZoneDelegate.invokeTask (zone.js?6524:421)
    at Zone.runTask (zone.js?6524:188)
    at ZoneTask.invokeTask (zone.js?6524:495)
    at ZoneTask.invoke (zone.js?6524:484)
    at timer (zone.js?6524:2065)

而且我们无法弄清楚为什么会出现此错误。但是我们在我们的应用程序中发现了两个异常情况。

第一个，在webpack生成的script.bundle.js中。有一些多余的变量。

/* WEBPACK VAR 注入 */(function(jQuery, global) {var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT ;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;var WEBPACK_AMD_DEFINE_FACTORY, WEBPACK_AMD_DEFINE_ARRAY, WEBPACK_AMD_DEFINE_RESULT;

第二个，如果我们将console.log()添加到jquery.themepunch.tools.min，我们会得到一个错误。

jquery.themepunch.tools.min.js?bfe2:19 Uncaught TypeError: Cannot read property 'log' of undefined
    at Object.eval (jquery.themepunch.tools.min.js?bfe2:19)
    at eval (jquery.themepunch.tools.min.js:159)
    at Object../src/main/webapp/app/website/v/js/jquery.themepunch.tools.min.js (script.bundle.js:97)
    at __webpack_require__ (manifest.bundle.js:713)
    at fn (manifest.bundle.js:118)
    at Object.eval (script.js?1cd8:2)
    at eval (script.js:668)
    at Object../src/main/webapp/app/website/v/js/script.js (script.bundle.js:111)
    at __webpack_require__ (manifest.bundle.js:713)
    at fn (manifest.bundle.js:118)

所以我们认为webpack处理文件的方式有问题jquery.themepunch.tools.min.js.

此致。

Answer 1

好吧，我们没有找到 100% 的解决方案，但我们设法用 revolution slider 迁移了 webpack。

所以解决方案是 将相对于旋转滑块的 js 文件添加到 header 传统方式，方法是使用 add-asset-html-webpack-plugin.

new AddAssetHtmlPlugin([
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/jquery') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/jquery.themepunch.revolution.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/jquery.themepunch.tools.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.actions.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.kenburn.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.layeranimation.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.migration.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.navigation.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.parallax.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.slideanims.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/extensions/revolution.extension.video.min') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/main-slider-script.js') },
    { filepath: require.resolve('../src/main/webapp/app/website/v/js/app.js') }
    ])

此插件会将 js 文件添加到 index.html 的 header。

然后我们不得不降级旋转滑块的版本。导致tp-caption的动画效果导致js错误。我们还没有仔细看。但现在我们将坚持使用旧的革命版本。如果你们发现如何在最新的革命版本中使用此方法，请告诉我们。

您还需要为要添加到插件的每个 js 文件创建（或不创建）空文件。js.map。

add-asset-html-webpack-plugin插件link： https://www.npmjs.com/package/add-asset-html-webpack-plugin

希望这对任何人都有帮助。

此致。

Answer 2

试试这个解决方案，它对我有用：

使用 npm 或 yarn 安装 jquery 和 gsap
在 webpack 配置中，创建一个包含助手和旋转滑块本身的块：

...
entry: {
    'bundle': './src/js/index.js',
    'revolution' : [
        './src/js/revo-helper',
        './src/js/jquery.themepunch.revolution.5.4.8.1',
     ]
...

在src/js/revo-helper.js中，放置如下代码：

// Import jquery
import $ from "jquery";

// Import green sock
import {_gsScope} from  'gsap';

// Propaginate it to Revolution Slider
window.punchgs = window.GreenSockGlobals  = _gsScope.GreenSockGlobals;

// Make jQuery be visible globally for Revolution Slider
global.jQuery = $;

// Activate slider on document loaded as usual
var revapi1084;
$(document).ready(function () {
      revapi1084 = $("#rev_slider_container").show().revolution({
            // ...
            // ...
      });
}

在您希望放置滑块的页面上使用此块：（在webpack.config.js中，注意区块部分的'revolution'）

....
new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/pug/pages/index.pug',
    chunks: ['common', 'revolution']
}),
...

希望这会有所帮助。

PS：请注意，不包括 jquery.themepunch.tools，没有它似乎工作正常。如果您需要使用它的某些功能，请删除该文件中属于 gsap 的任何部分。

使用 webpack 集成革命滑块

Integration revolution slider with webpack

webpack

angular5

jhipster

revolution-slider