javascript - JQuery 缓动和 WebPack

Question

我有一个按钮，必须隐藏框架集并显示以下框架集

这是我的 HTML 的一部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="./js/scripts-bundled.js"></script>

这是调用缓动函数的地方

import $ from "jquery";

class FormController {
  // variables declararations and some code not useful now...

  buttonClicked(evt) {

    this.current_object.animate(
      { opacity: 0 },
      {
        step: function(now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = now * 50 + "%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        this.current_object.css({
          transform: "scale(" + scale + ")",
          position: "absolute"
        });
        this.next_object.css({ left: left, opacity: opacity });
      },
      duration: 800,
      complete: function() {
        this.current_object.hide();
        this.animating = false;
      },
      //this comes from the custom easing plugin
      easing: "easeInOutBack"
    }
  );
}

如果我运行此代码并单击按钮，我会收到此错误未捕获类型错误:jQuery.easing[this.easing] 不是函数

我相信，由于某种原因，缓动插件未正确加载。

有没有办法通过 Webpack 在代码中引入它？

谢谢

Answer 1

我在使用 jquery.easing 时遇到了同样的错误，然后通过 Webpack 修复它:

将这些依赖项添加到package.json

"dependencies": {
    "jquery": "3.4.1",
    "jquery.easing": "^1.4.1",
    "popper.js": "^1.16"
}

npm run install 安装依赖项并将其导入到 main.js 文件中:

try {
    window.Popper = require('popper.js').default;
    window.jQuery = window.$ = require('jquery');
    require('jquery.easing'); // dat works :3
} catch (e) {}

然后运行 ​​webpack 脚本(如 npm run dev)来构建应用程序。这对我来说效果很好。