函数在导入其他JS文件时不起作用

Question

我使用一个简单的脚本来检查什么时候有东西在视口中，然后添加一个类。

然而，当我试图导入任何东西时，脚本在Webpack中停止工作。

下面是一个基本的导入例子，它破坏了我的JS文件。不管我把导入和脚本等的顺序是什么

window.jQuery = $;
import 'slick-carousel';
$(function ($, win) {
$.fn.inViewport = function (cb) {
return this.each(function (i, el) {
function visPx() {
var H = $(this).height(),
r = el.getBoundingClientRect(), t = r.top, b = r.bottom;
return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
} visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));

$(".preload").inViewport(function (px) {
if (px) $(this).addClass("is-active");
});

如果我删除import 'slick-carousel';或任何我的导入(它不是特定于slick-carousel)，脚本停止工作。

下面是一个viewport脚本工作的例子。

Answer 1

在我看来导入本身可能是错误的。javascript中的Import通常是一个url，如:

import bar from './bar.js';
bar();

你可以在node中只使用带模块名的import。

从文档:"module-name:要导入的模块。指定符的求值是主机指定的。这通常是包含该模块的.js文件的相对或绝对URL。在Node中，无扩展导入通常引用node_modules中的包。某些打包器可能允许导入没有扩展名的文件;检查你的环境。只允许单引号和双引号的字符串。">

尝试使用相对或绝对url添加导入。

如果这不是问题。请打开控制台并添加导入运行时得到的错误信息。