Svelte - ReferenceError：未定义缓冲区

Question

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

ReferenceError: 缓冲区未定义

示例代码： https://github.com/nickgrealy/svelte-webrtc（下面还有链接）

以下是重现的步骤：安装库，然后将其导入*.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？试试其他库？

我不知道如何配置汇总...（希望你们之前遇到过一些简单的事情！）。

注意不确定是否相关，我将 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$$0$1')
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$$1$1 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$$1$1')
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~! ????

Answer 1

当使用peerjs browserify 不是必需的，并将rollup.config.js 中的输出format 更改为cjs。

如果要保留iife，则需要在输出属性strict: false 下的rollup.config.js 中禁用strict 模式，因为该库存在问题。