引入其他JS文件后，自定义视口检测脚本在Webpack中失效

问题原因 #

在Webpack环境中，slick-carousel会自行依赖并导入jQuery，若你的脚本没有和它使用同一个jQuery实例，就会导致自定义的inViewport插件无法被正确识别。你手动赋值window.jQuery = $的方式，无法保证slick和你的脚本共享同一个jQuery对象，最终出现插件失效的情况。

解决方案 #

1. 配置Webpack全局注入jQuery（推荐）

通过Webpack的ProvidePlugin将jQuery全局注入，确保所有模块都使用同一个jQuery实例：
在webpack.config.js中添加配置：

const webpack = require('webpack');

module.exports = {
  // 其他已有配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

然后修改你的脚本，去掉手动赋值window.jQuery = $，直接导入并使用：

import $ from 'jquery';
import 'slick-carousel';

// 定义inViewport插件
$.fn.inViewport = function(cb) {
  return this.each(function(i, el) {
    function visPx() {
      const H = $(this).height();
      const r = el.getBoundingClientRect();
      const t = r.top;
      const b = r.bottom;
      return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
    }
    visPx();
    $(window).on("resize scroll", visPx);
  });
};

// DOM就绪后执行检测
$(function() {
  $(".preload").inViewport(function(px) {
    if (px) $(this).addClass("is-active");
  });
});

2. 确保插件挂载到正确的jQuery实例

如果不想修改Webpack配置，可确保自定义插件直接挂载到导入的jQuery实例上，避免依赖全局对象：

import $ from 'jquery';
import 'slick-carousel';

// 直接在导入的$上定义插件
$.fn.inViewport = function(cb) {
  return this.each(function(i, el) {
    function visPx() {
      const H = $(this).height();
      const r = el.getBoundingClientRect();
      const t = r.top;
      const b = r.bottom;
      return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
    }
    visPx();
    $(window).on("resize scroll", visPx);
  });
};

// 确保DOM加载完成后执行
$(document).ready(function() {
  $(".preload").inViewport(function(px) {
    if (px) $(this).addClass("is-active");
  });
});

3. 修正原脚本中的立即执行函数写法

你原代码中的DOM ready包裹写法存在语法问题，正确的写法应该是将插件定义和调用放在$(function() { ... })内部，确保DOM就绪后再执行：

import $ from 'jquery';
import 'slick-carousel';

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

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

内容的提问来源于stack exchange，提问作者probablybest