生成失败，出现解析错误

Question

我正试图在一个svelte组件中设置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_modulesutilutil.js -> node_modulesutilnode_modulesinheritsinherits.js -> node_modulesutilutil.js
Circular dependency: node_modulesutilutil.js -> node_modulesutilnode_modulesinheritsinherits.js -> C:UsersmundaDocumentsupworkupwork-gameshownode_modulesutilutil.js?commonjs-proxy -> node_modulesutilutil.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

我生成应用程序的步骤：

1. 使用yarn create nx-workspace启动nx工作区
2. 使用yarn add @nxext/svelte安装svelte生成器，链接：https://nx.dev/community#:~：text=%20Nx%20工作流-，%40nxext/svelte，-Nx%20plugin%20to
3. 使用已安装的生成器生成svelte应用程序
4. 在组件中添加socket.io客户端代码(文档中提到的基本套接字初始化)
5. 由于我的服务器和客户端不在同一个域上，所以添加import { io } from 'socket.io-client'并使用const socket = io(SERVER_URL)初始化套接字(在我的情况下，这是http://localhost:3000)
6. 使用yarn socket.io-client安装socket.io客户端
7. 交叉手指使用nx run-many --target=serve --all --parallel运行serve目标

结果：上述日志。

我错过了什么？

Answer 1

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

• bufferutil
• utf-8-validate

一个简单的yarn add bufferutil utf-8-validate为我修复了它。socket.io-client包或socket.io官方文档网站的文档中提到了这一点。

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

最后我不得不通过CDN路线。

我就是这样做的：

1. 移动函数中的套接字初始化逻辑

<script>
...
const initialiseSocket = () => {
socket = io('http://localhost:3000');
socket.on('messages', (data) => {
//...
});
}
</script>

2. 添加一个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>