JQuery Easing and 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.ease上遇到了同样的错误，然后通过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(为应用程序构建。 这对我来说很好用。

Answer 2

install jquery.easing，

要导入到您的主文件.js只需导入为： 导入"jquery.easing";