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

Question

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

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

TypeError: Kn is not a function 与名为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 使用 DateTime 和应用程序其他地方的几个 lodash 方法没有任何问题，所以这不是第一次构建这些包。

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

但这对我来说毫无意义，因为这个 EXACT 代码存在于我的应用程序的另一个页面中：

    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 的情况下重新运行。它将停在该行并显示调用堆栈。查看调用堆栈，它可能会揭示它的来源。