Bigcommerce模具包，无需缩小javascript

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
      });
    }
  }
}

该模块的目的仅仅是在屏幕断点更改时破坏基础下拉菜单。 如果新的断点是中等或更大，并且存在下拉列表，请销毁它。 如果断点小于中点，并且下拉列表不存在，请创建它。

这完全符合我的商店本地开发版本中的期望。 然后，我运行“模具包”，并将主题上载到实时商店。 当我这样做时，每次将浏览器的大小调整到中等或更大的断点时，都会出现错误。 错误是：

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

由于将所有JavaScript bundle.js到bundle.js文件中，因此很难进行故障排除，并且我无法在开发中重现该问题。

是否有任何方法（甚至是骇人听闻的方法）告诉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
      });
    }
  }
}