socket.io - 构建失败并出现解决错误
问题描述
我正在尝试在一个苗条的组件中设置 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$$0'
No name was provided for external module 'http' in output.globals – guessing 'require$$1'
No name was provided for external module 'https' in output.globals – guessing 'require$$2'
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$$0$3'
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$$1$1'
No name was provided for external module 'stream' in output.globals – guessing 'require$$0$2'
No name was provided for external module 'utf-8-validate' in output.globals – guessing 'require$$0$1'
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
我生成应用程序的步骤:
- 使用启动 nx 工作区
yarn create nx-workspace
yarn add @nxext/svelte
使用链接安装 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) - 使用 . 安装 socket.io 客户端
yarn socket.io-client
。 - 使用,手指交叉运行
serve
目标。nx run-many --target=serve --all --parallel
结果:上述日志。
我错过了什么?
解决方案
我需要安装以下缺少的依赖项:
bufferutil
utf-8-validate
一个简单yarn add bufferutil utf-8-validate
的为我修好了。这在docs for socket.io-client
package 或socket.io
官方文档网站中有所提及。
这确实修复了我的 PC(Windows)上的构建,但我无法在 mac 上运行相同的东西。我尝试删除node_modules
and 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>
推荐阅读
- c - for循环:在一个循环中进行增量和访问
- angular - Angular:如何从 API 调用响应中提取一个属性?
- kotlin - Kotlin 拳击,看不懂区别?
- php - 需要在php后台运行Curl
- scala - 更新火花数据框中多个火花列的日期格式
- javascript - 我可以使用 Webpack 直接将 Javascript 注入 HTML 文件吗?
- ocaml - 使用最新版本的 zarith 和 opam
- python - 在 Python 的单个 return 语句中调用相同的函数两次
- webpack-dev-server - Webpack 开发服务器 (Uncaught SyntaxError: Unexpected token '<' )
- ruby-on-rails - 为什么设计中使用的单词并不总是被翻译......?