Question

我在制作中遇到javascript错误，我无法在开发中复制。这是违规模块：

import $ from 'jquery';
import 'foundation-sites/js/foundation.core';
import 'foundation-sites/js/foundation.util.mediaQuery';
import 'foundation-sites/js/foundation.util.keyboard';
import 'foundation-sites/js/foundation.util.box';
import 'foundation-sites/js/foundation.util.motion';
import 'foundation-sites/js/foundation.util.triggers';
import 'foundation-sites/js/foundation.dropdown';

export default function() {
  $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){
    toggle();
  });

  // toggle on page load
  toggle();
}

function toggle() {
  const $drop = $('[data-more-categories-dropdown]');

  if (Foundation.MediaQuery.atLeast('medium')) {
    if ($drop.data('dropdown')) {
      $drop.foundation('destroy');
      $drop.removeData('dropdown');
      $drop.attr('style', '');
    }
  }
  else {
    if (!$drop.data('dropdown')) {
      new Foundation.Dropdown($drop, {
        closeOnClick: true
      });
    }
  }
}

模块的目的只是在屏幕断点发生变化时销毁基础下拉菜单。如果新断点为中等或更大，并且存在下拉列表，则将其销毁。如果断点小于中，并且下拉列表不存在，请创建它。

这完全符合商店本地开发版本的要求。然后，我运行＆＃39; stencil bundle＆＃39;，并将主题上传到实时商店。当我这样做时，每次将浏览器调整到中等或更大的断点时都会出错。错误是：

bundle.js:4 Uncaught ReferenceError: We're sorry, 'destroy' is not an available method for this element.

这很难排除故障，因为所有的javascript都缩小为bundle.js文件，我无法在开发中重现这个问题。

有没有办法（甚至是一种hacky方式）告诉stencil bundle像处理开发一样处理javascript？这样我就可以在代码中留下debugger语句，并有源映射来帮助我找出生产行为不同的原因。

如果有人对此可能导致的任何其他想法，请告诉我。

Answer 1

我不知道为什么，但我对模块进行了一些小改动，似乎解决了这个问题。我现在正在使用zfPlugin数据属性来检查下拉列表是否已启动。这是新的toggle功能。

function toggle() {
  const $drop = $('[data-more-categories-dropdown]');

  if (Foundation.MediaQuery.atLeast('medium')) {
    if ($drop.data('zfPlugin')) {
      $drop.foundation('destroy');
      $drop.attr('style', '');
    }
  }
  else {
    if (!$drop.data('zfPlugin')) {
      new Foundation.Dropdown($drop, {
        closeOnClick: true
      });
    }
  }
}

Bigcommerce模板包没有缩小javascript

1 个答案: