构建失败并解决错误

Question

我正在尝试在一个精巧的组件中设置 socket.io-client。

文档说我可以做到 import { io } from 'socket.io-client'。

但是当我尝试使用 serve 目标运行应用程序时，命令失败并显示以下日志：

Bundle complete. Watching for file changes...
Bundling...
'bufferutil' is imported by bufferutil?commonjs-external, but could not be resolved – treating it as an external dependency
'utf-8-validate' is imported by utf-8-validate?commonjs-external, but could not be resolved – treating it as an external dependency
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> node_modules\util\util.js
Circular dependency: node_modules\util\util.js -> node_modules\util\node_modules\inherits\inherits.js -> C:\Users\munda\Documents\upwork\upwork-gameshow\node_modules\util\util.js?commonjs-proxy -> node_modules\util\util.js
@rollup/plugin-typescript: Rollup 'sourcemap' option must be set to generate source maps.
No name was provided for external module 'tty' in output.globals – guessing 'tty'
No name was provided for external module 'os' in output.globals – guessing 'os'
No name was provided for external module 'fs' in output.globals – guessing 'fs'
No name was provided for external module 'child_process' in output.globals – guessing 'require$[=10=]'
No name was provided for external module 'http' in output.globals – guessing 'require$'
No name was provided for external module 'https' in output.globals – guessing 'require$'
No name was provided for external module 'net' in output.globals – guessing 'net'
No name was provided for external module 'tls' in output.globals – guessing 'tls'
No name was provided for external module 'crypto' in output.globals – guessing 'require$[=10=]'
No name was provided for external module 'zlib' in output.globals – guessing 'zlib'
No name was provided for external module 'bufferutil' in output.globals – guessing 'require$'
No name was provided for external module 'stream' in output.globals – guessing 'require$[=10=]'
No name was provided for external module 'utf-8-validate' in output.globals – guessing 'require$[=10=]'
Creating a browser bundle that depends on Node.js built-in modules ("tty", "os", "http", "https", "zlib" and "stream"). You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node

我生成应用的步骤：

使用 yarn create nx-workspace
使用 yarn add @nxext/svelte、link 安装 svelte 生成器：https://nx.dev/community#:~:text=the%20Nx%20workflow-,%40nxext/svelte,-Nx%20plugin%20to
使用安装的生成器生成 svelte 应用程序。
在组件中添加 socket.io 客户端代码（文档中提到的基本套接字初始化）。
因为我的服务器和客户端不会托管在同一个域中，所以添加 import { io } from 'socket.io-client' 并使用 const socket = io(SERVER_URL) 初始化套接字（在我的例子中是 http://localhost: 3000)
使用 yarn socket.io-client 安装 socket.io 客户端。
运行 serve 目标使用 nx run-many --target=serve --all --parallel，双手合十。

结果：如上日志。

我错过了什么？

Answer 1

我需要安装以下缺少的依赖项：

bufferutil
utf-8-validate

一个简单的 yarn add bufferutil utf-8-validate 为我修复了它。 docs for socket.io-client package 或 socket.io official documentation website 中提到了这一点。

这确实修复了我 PC 上的构建 (windows)，但我无法在 mac 上获得同样的东西运行。我尝试删除 node_modules 和 yarn.lock，重新运行 yarn.

最后不得不走CDN路线。

我是这样做的：

将套接字初始化逻辑移到一个函数中。

<script>
  ...
  const initialiseSocket = () => {
    socket = io('http://localhost:3000');

    socket.on('messages', (data) => {
      //...
    });
  }
</script>

添加一个svelte:head标签从CDN加载socket-io.client并将函数传递给这个脚本的on:load.

<svelte:head>
  <script
    src="https://cdn.socket.io/4.2.0/socket.io.min.js"
    integrity="sha384-PiBR5S00EtOj2Lto9Uu81cmoyZqR57XcOna1oAuVuIEjzj0wpqDVfD0JA9eXlRsj"
    crossorigin="anonymous"
    on:load={initialiseSocket}></script>
</svelte:head>

构建失败并解决错误

Build fails with resolve errors

socket.io

svelte

nx-workspace