Socket.io-client: 无法在 IE 中加载文件

在v2.3.0和 IE 11 上也是如此

在v2.3.0和 IE 11 上也是如此

我们恢复到 2.2.0 并且运行良好。

我也恢复到 2.2.0，它工作正常。 似乎模块导出的代码不是有效的 ES5。

好吧，它应该是由 babel 转译的……我会看看这个。

乐囧。 9 月 26 日 2019à11:09，orangejuice [email protected]一
评论：

我也恢复到 2.2.0，它工作正常。

—
您收到此消息是因为您订阅了此线程。
直接回复本邮件，在GitHub上查看
https://github.com/socketio/socket.io-client/issues/1328?email_source=notifications&email_token=ADDNSFI5LWY4MJXY24WZNNLQLR333A5CNFSM4I2MYYBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBWZQLOM543MVIVWZQLOM543VMVBWZQLOM543VMVBWZQLOM543MVIVWZQLOM43VW4MJXY24WZNNLQLR333A5CNFSM4I2MYYBKYY3
或静音线程
https://github.com/notifications/unsubscribe-auth/ADDNSFNC7OUW4Z3BEWLSNRLQLR333ANCNFSM4I2MYYBA
.

这是在将 debug 从 v3 更新到 v4 之后发生的，该 v4 在其可分发中使用了扩展运算符。
出于性能原因，经常将 node_modules 排除在 babel 编译之外。

在 IE11 中也得到了这个。

"SyntaxError: Syntax error
   at ../node_modules/socket.io-client/node_modules/debug/src/browser.js (http://192.168.86.48:3000/static/vendors~vehicle-Vehicle.jsx.eb6d2ebd6bfc7172757c.js:510:1)
   at __webpack_require__ (http://192.168.86.48:3000/static/client.js?1571655164758:107:12)
   at eval code (eval code:7:1)
   at ../node_modules/socket.io-client/lib/url.js (http://192.168.86.48:3000/static/vendors~vehicle-Vehicle.jsx.eb6d2ebd6bfc7172757c.js:488:1)
   at __webpack_require__ (http://192.168.86.48:3000/static/client.js?1571655164758:107:12)
   at eval code (eval code:6:1)
   at ../node_modules/socket.io-client/lib/index.js (http://192.168.86.48:3000/static/vendors~vehicle-Vehicle.jsx.eb6d2ebd6bfc7172757c.js:444:1)
   at __webpack_require__ (http://192.168.86.48:3000/static/client.js?1571655164758:107:12)
   at eval code (eval code:55:22)
   at ./shared/components/catalogue/ValuationCatalogue.jsx (http://192.168.86.48:3000/static/vehicle-Vehicle.jsx.b7e97db41986fa53caa6.js:344:1)"

受影响的线路

/**
 * Invokes `console.log()` when available.
 * No-op when `console.log` is not a "function".
 *
 * <strong i="9">@api</strong> public
 */
function log(...args) {
    // This hackery is required for IE8/9, where
    // the `console.log` function doesn't have 'apply'
    return typeof console === 'object' &&
        console.log &&
        console.log(...args);
}

没有什么要添加的，因为它已被识别为非转译代码。

在v2.3.0和 IE 11 上也是如此

和 iOS9 Safari

这是我们也自动升级的单点版本的重大更改。 对于那些仍然支持 IE11 的人来说，这是相当严重的，我们花了几天时间才意识到。

您希望他们花多长时间来解决问题？

此问题与debug:4.1.0他们已经替换了该方法，但没有修复此问题的新版本。

修复socket.io-client和engine.io-client将用版本4.0.1替换当前版本debug 4.0.1 。

不幸的是，似乎debug的维护者根本不愿意听到我们的问题： https :

嗨@darrachequesne :)

你能把socket.io-client的debug包固定到4.0.1吗？ 谢谢！

与此同时，我试图接近debug的维护者，并请他重新考虑他不再将包转换为ES5代码的选择： https :

我已经听到这个问题一千次了。 自从问题第一次出现以来，我就听说过。 如果您希望它在过时的浏览器上运行，请转译您的应用程序； debug只是您将遇到的许多依赖项中的第一个，这些依赖项是作为 ES6 模块编写和发布的。

出于性能原因，经常将 node_modules 排除在 babel 编译之外。

这并不意味着包维护者应该将他们的代码固定在石器时代。 javascript 生态系统是缓慢的，是的，但是当 IE11 阻止我们时它甚至更慢。 很多人选择debug的原因是因为它是前 10 个最依赖的软件包之一，因此通常是第一个遇到错误或问题的软件包之一，即使 100 个其他依赖项会减慢您的速度也下来

如果您不相信我，请在您的node_modules手动转换debug node_modules并尝试再次捆绑您的应用程序。 很可能，根据应用程序的大小，捆绑过程将在其他地方失败。

如果您对 Babel 的效率有疑问，请在 Babel 上提出问题。 如果您遇到 CRA 无法执行正确转译的问题，请向 CRA 提出问题。

我不想显得不屑一顾； 这不是debug的问题。

从他们在这个环节说什么这里。 好像是babel配置问题，说不定工作人员把socket-io-client里面的配置改一下就可以解决了。

正确的; 这是 Babel 团队的官方回应。 请把你的问题放在那里。

什么官方回应？ 相关问题是关于 babel 在配置为时没有从 node_modules 转译选定的包，并且已修复。

Socket.io-client 甚至不使用 babel 进行转译。 它仅使用 webpack 将所有依赖项捆绑到一个可分发文件中。

所以现在，如果要在旧浏览器中支持 socket.io-client，它需要在构建时进行转换步骤，或者需要降级或替换调试。

为需要转译的 Web 发布包实际上并不常见。 在多年的转译过程中，即使在 node_modules 中具有 GB 级依赖项的项目中，我也只遇到过几次。 直到现在，每个维护者都很好地将其视为错误......

这是我所指的回应：

我同意这不是debug错误，而是 Babel 的配置问题。

如果您将 Babel 配置为转译节点模块，但它仍然无法正常工作，请提供一个我可以克隆以进行调查的最小存储库。

所以现在，如果要在旧浏览器中支持 socket.io-client，它需要 . . . 转译步骤

正确的。 这就是现代 Web 开发的状态。

在 node_modules 中有 GB 的依赖项

这是真正的问题。 不是debug选择不转译。 通过使用 ES6 模块，这通常不是问题，因为您的应用程序只会捆绑它使用的依赖项，因此只会转换它使用的依赖项。 人们每天都这样做，效果很好。

直到现在，每个维护者都很好地将其视为错误......

使用完全有效的 Javascript 版本不是错误。

说转译 node_modules 而不是发布一个支持尽可能多的活动环境的包对于任何经营业务的人来说都是中指。
我需要仔细选择要转译的每个包，因为从 node_modules 转译所有内容超过了某些项目的四倍构建时间 - 有时从几分钟到一个小时。 没有人有时间这样做。
今天，使用 IE11 的人比使用 Firefox 的人还多。 Microsoft 仍支持 IE11。 我不认为强迫个人对 JS 社区的信念行动不够快真的有什么好处。

说转译 node_modules 而不是发布一个支持尽可能多的活动环境的包对于任何经营业务的人来说都是中指。

这不是真正的建设性态度，也不是我个人希望在开源中进行的那种讨论。

我想我已经在这里说了我的作品。 抱歉，我决定提高每周下载近 6000 万次的模块的可维护性不适合您的商业模式。

今天，使用 IE11 的人比使用 Firefox 的人还多。 Microsoft 仍支持 IE11。 我不认为强迫个人对 JS 社区的信念行动不够快真的有什么好处。

在这种情况下，问题更多的是使用 ie11 的公司在我登录后有 25% 的访问者来自 ie。

我想对 ie 竖起中指，但是当你经营一家企业时，你不能把他们送到地狱，因为你想要钱:)

此问题的当前解决方法是什么？

此问题的当前解决方法是什么？

2.2.0 当你可以在 fmoessle 之后

我花了 3 天时间才发现错误来自socket.io-client模块，哈哈

我也是我将模块版本降级到 2.2.0 欢呼

降级到 2.2.0 也对我有用。 谢谢。

也许一个好的解决方案是将 socket.io 切换到 debug debug-es5 的这个分支，它被转换为 es5。

我花了一整天的时间试图让 babel 和 webpack 转译 debug/src/browser.js，从我偶然发现的许多线程来看，似乎很多人也遇到了这个问题。 似乎可以节省很多工程时间。

顺便说一下，socket.io v2.2.0 有一个内存泄漏，在 'ws' v7.1.2 (https://github.com/websockets/ws/issues/1617) 中修复，所以要小心降级。

编辑：修复了
我发现的大多数帖子都建议停止从 webpack 中排除 /node_modules/ 但这不起作用而且速度很慢。 （很确定 webpack 正在访问文件，但 babel 没有转译它，可能与 babel/preset-env 有关）

相反，我只是安装了debug-es5并通过将它添加到 webpack.config.js 来让 webpack 使用它代替debug

  resolve: {
    alias: {
      debug: 'debug-es5',
    },
  },

我在用：

{
  test: /\.js$/,
  use: babelLoader,
  exclude: excludeNodeModulesExcept(['debug']),
},

const babelLoader = {
    loader: 'babel-loader',
    options: {
      // Don't waste time on Gzipping the cache
      cacheCompression: false,
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true,
      plugins: ['@babel/plugin-syntax-dynamic-import'],
      presets: [['@babel/env', { modules: false }]],
      sourceMaps: includeSourcemap && !isDevelopmentMode,
    },
  };



md5-af1f69980cb7fa352eba1d2f79ce2612



const excludeNodeModulesExcept = function (modules) {
  var pathSep = path.sep;
  if (pathSep == '\\')
    // must be quoted for use in a regexp:
    pathSep = '\\\\';
  var moduleRegExps = modules.map(function (modName) {
    return new RegExp('node_modules' + pathSep + modName);
  });

  return function (modulePath) {
    if (/node_modules/.test(modulePath)) {
      for (var i = 0; i < moduleRegExps.length; i++)
        if (moduleRegExps[i].test(modulePath)) return false;
      return true;
    }
    return false;
  };
};

将 socket.io-client 更改为 2.2.0 对我有用，但仅在构建和启动应用程序之后。

在开发模式下我仍然收到错误

类型错误：对象不支持属性或方法“cbrt”
{
[职能]： ，
__proto__：{}，
描述：“对象不支持属性或方法‘cbrt’”，
消息：“对象不支持属性或方法‘cbrt’”，
名称：“类型错误”，
号码：-2146827850，
堆栈：“类型错误：对象不支持属性或方法‘cbrt’
在 cielabForwardTransform（评估代码：39754:3）
在 fromXYZ（评估代码：39763:3）
在减轻（评估代码：39706：3）
在 genVariations（评估代码：39696：5）
在解析（评估代码：39606：7）
在 parsedTheme.get （评估代码：39498：7）
在generatedStyles.get（评估代码：39466：7）
在 Theme.prototype.applyTheme（评估代码：39297:5）
在处理程序（评估代码：39449:13）
在 Vue.prototype.$watch (eval code:4941:9)",
符号（Lang 回退）_i.t81c9tw05xo：未定义，
符号（react.element）_h.t81c9tw05xo：未定义，
符号（停止）_n.t81c9tw05xo：未定义
}

也许一个好的解决方案是将 socket.io 切换到 debug debug-es5 的这个分支，它被转换为 es5。

我花了一整天的时间试图让 babel 和 webpack 转译 debug/src/browser.js，从我偶然发现的许多线程来看，似乎很多人也遇到了这个问题。 似乎可以节省很多工程时间。

顺便说一下，socket.io v2.2.0 有一个内存泄漏，在 'ws' v7.1.2 ( websockets/ws#1617 ) 中得到修复，所以要小心降级。

编辑：修复了
我发现的大多数帖子都建议停止从 webpack 中排除 /node_modules/ 但这不起作用而且速度很慢。 （很确定 webpack 正在访问文件，但 babel 没有转译它，可能与 babel/preset-env 有关）

相反，我只是安装了debug-es5并通过将它添加到 webpack.config.js 来让 webpack 使用它代替debug

  resolve: {
    alias: {
      debug: 'debug-es5',
    },
  },

这为我节省了数小时的工作时间 - 谢谢！

我创建了一个非常小的 repo，通过基本的 Webpack 配置解决了这个问题： https :

debug依赖项已恢复为3.1.0 ，不需要转译。 在2.3.1 中发布。

请注意，您还可以使用webpack-remove-debug插件，以删除对调试依赖项的任何调用（直到我们找到提供带调试和不带调试的构建的正确方法）。