JQuery 缓动和 WebPack答案

【问题标题】：JQuery Easing and WebPackJQuery 缓动和 WebPack
【发布时间】：2020-02-03 17:43:26
【问题描述】：

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

这是我的 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 在代码中要求它？

谢谢

【问题讨论】：

标签： javascript jquery webpack

【解决方案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）为应用程序构建。这对我来说很好。

【讨论】：

我会努力的！谢谢你现在

【解决方案2】：

安装 jquery.easing，

并且要导入您的 main.js 文件，只需导入为：导入“jquery.easing”；

【讨论】：