Svelte - ReferenceError: buffer is not defined

Svelte - ReferenceError: buffer is not defined

尝试在我的新 Svelte 应用程序中设置 WebRtc 连接,但每当我尝试导入库时都会遇到此错误。

ReferenceError: buffer is not defined

示例代码: https://github.com/nickgrealy/svelte-webrtc(下面还有link)

以下是重现的步骤:安装库,然后将其导入 *.svelte 组件。

例如peerjs

npm i peerjs
import Peer from "peerjs";

此库也会出现 - simple-peer

npm i simple-peer
import Peer from "simple-peer";

两者都给出以下错误:

Uncaught ReferenceError: buffer is not defined
    at main.ts:14

不太确定接下来要尝试什么...写香草 Javascript?尝试其他库?

我不知道如何配置 rollup...(希望你们中的某个人以前遇到过这种简单的事情!)。

N.B。不确定是否相关,我将 Svelte 项目转换为 Typescript(使用内置脚本)。

** 添加了重现代码 **

https://github.com/nickgrealy/svelte-webrtc/blob/main/src/main.ts#L2

来自 yarn dev

的控制台日志
yarn run v1.22.10
$ rollup -c -w
rollup v2.56.3
bundles src/main.ts → public/build/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "buffer" and "events". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
LiveReload enabled
(!) Plugin node-resolve: preferring built-in module 'buffer' over local alternative at '/Users/userx/svelte-webrtc/node_modules/buffer/index.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
(!) Circular dependencies
node_modules/readable-stream/lib/_stream_readable.js -> node_modules/readable-stream/lib/_stream_duplex.js -> node_modules/readable-stream/lib/_stream_readable.js
node_modules/readable-stream/lib/_stream_duplex.js -> node_modules/readable-stream/lib/_stream_writable.js -> node_modules/readable-stream/lib/_stream_duplex.js
node_modules/readable-stream/lib/_stream_duplex.js -> node_modules/readable-stream/lib/_stream_writable.js -> /Users/userx/svelte-webrtc/node_modules/readable-stream/lib/_stream_duplex.js?commonjs-proxy -> node_modules/readable-stream/lib/_stream_duplex.js
node_modules/readable-stream/lib/_stream_readable.js -> node_modules/readable-stream/lib/_stream_duplex.js -> /Users/userx/svelte-webrtc/node_modules/readable-stream/lib/_stream_readable.js?commonjs-proxy -> node_modules/readable-stream/lib/_stream_readable.js
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
buffer (guessing 'buffer')
events (guessing 'require$[=13=]')
created public/build/bundle.js in 2.9s

[2021-09-05 00:31:10] waiting for changes...

> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"


  Your application is ready~! 

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

────────────────── LOGS ──────────────────

  [00:31:18] 200 ─ 5.50ms ─ /
  [00:31:18] 200 ─ 0.60ms ─ /global.css
  [00:31:18] 200 ─ 0.71ms ─ /build/bundle.css
  [00:31:18] 200 ─ 1.35ms ─ /build/bundle.js
  [00:31:22] 200 ─ 0.76ms ─ /global.css
  [00:31:22] 200 ─ 1.83ms ─ /build/bundle.css
  [00:31:22] 200 ─ 3.96ms ─ /build/bundle.js.map

** 更新 **

添加了 node plugin,现在出现此错误...

Uncaught ReferenceError: require$ is not defined

...这些日志。

yarn run v1.22.4
$ rollup -c -w
rollup v2.56.3
bundles src/main.ts → public/build/bundle.js...
(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on "buffer". You might need to include https://github.com/snowpackjs/rollup-plugin-polyfill-node
LiveReload enabled
(!) Circular dependency
polyfill-node.global.js -> polyfill-node.global.js
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
buffer (guessing 'require$')
created public/build/bundle.js in 2.6s

[2021-09-05 00:57:04] waiting for changes...
npm WARN lifecycle The node binary used for scripts is /var/folders/05/qnr367194ss7ktgg_c2r57440000gp/T/yarn--1630767421122-0.4620373266212361/node but npm is using /Users/userx/.nvm/versions/node/v14.17.3/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.

> svelte-app@1.0.0 start /Users/userx/svelte-webrtc
> sirv public --no-clear "--dev"


  Your application is ready~! 

当不需要使用 peerjs browserify 时,在 rollup.config.js 中将输出 format 更改为 cjs

如果你想保留 iife 那么你需要在输出 属性 strict: false 下的 rollup.config.js 中禁用 strict 模式,因为库有一些问题.