node.js - Svelte/Sapper - 遇到与 Luxon 和 Lodash 构建相关的错误

Question

因此，我刚刚在我的原型(prototype)预订管理应用程序上推出了一个新页面 (dashboard.svelte) - 我将其与一系列其他更改一起提交并部署到我的 Bitnami Node.js (Ubuntu 16.04) VPS。

构建得很好，但是当在浏览器中加载任何网站时，我在控制台中收到一个奇怪的错误，这会中断所有其他 JS 的执行。

TypeError:Kn 不是一个函数，它与名为 map.xxx.js 的文件的 return Kn(t... 部分) 相关联:

var Kn, Xn = function (t, e) {
  return function (n, r) {
    if (null == n) return n;
    if (!qe(n)) return t(n, r);
    for (var i = n.length, o = e ? i : - 1, a = Object(n); (e ? o-- : ++o < i) && !1 !== r(a[o], o, a); );
    return n
  }
}(function (t, e) {
  return t && Qn(t, e, Pe)
}); var tr = function (t, e) {
  var n = - 1,
  r = qe(t) ? Array(t.length)  : [
  ];
  return Kn(t, function (t, i, o) {
    r[++n] = e(t, i, o)
  }),
  r
};

我花了几个小时试图追踪这个错误的根源(老实说这不是很直观)，并通过反复试验将其与前面提到的 dashboard.svelte 文件(顺便说一下，它在 npm run dev 中工作得很好)

https://gist.github.com/Bandit/58500ebc473e7d8d84bfb6ae16d41ea6

我已将我能找到的所有相关信息都放在上面的要点中。我真的希望有人能够阐明这个问题，因为我现在不得不回滚到较早的提交。

FWIW 我通过 Luxon 和应用程序其他地方的几个 lodash 方法使用 DateTime ，没有任何问题，所以这并不是第一次构建这些包。

/EDIT1 应该注意，如果我 rm src/routes/dashboard.svelte 然后 npm run build 一切正常，所以它完全受限于那个文件......

/EDIT2 在 dashboard.svelte 中注释掉以下几行可以使一切正常工作:

    // import merge from 'lodash/merge';

    // const { session } = stores();
    // $session.prefs = merge({}, $session.prefs);

但这对我来说没有意义，因为这个确切的代码存在于我的应用程序内的另一个页面中:

    import merge from 'lodash/merge';
    import { onMount } from 'svelte';
    import { hideAll } from 'tippy.js';
    import { numberWithOrdinal } from './_helpers.js';
    import { hasRole } from 'user.js';

    const { session } = stores();
    $session.prefs = merge({}, $session.prefs);

那么这与导入的顺序有关吗？

/EDIT3 关于我下面对调用堆栈的评论，这是触发问题的行(与 dashboard.svelte 位于完全不同的文件中，并且在服务器上运行良好):

    $: if (dates && availableItems && availableBookings) populateGrid();

/EDIT4 因此，经过大量调试后，我们设法将其固定为 lodash.sortBy。不知道为什么这突然成为一个问题，因为我已经使用它几个星期了，在应用程序的另一个页面上没有出现问题。不管怎样，我现在已经清除了它的所有痕迹，一切都很好。目前(因为我不认为这才是真正的问题)...

Answer 1

由于 JavaScript 已被丑化，调试变得更加困难。

在您的rollup.config.js中禁用terser插件。 (注释掉即可)

然后重新运行您的构建，它应该为您提供未损坏的命名。

另一个调试技巧是编辑 JS 文件 map.xyz.js 并在导致错误的行之前添加一个 debugger 语句。然后在打开 devtools 的情况下重新运行。它将停在该行并显示调用堆栈。查看调用堆栈，它可能会揭示它的来源。