websocket - 带有 subscriptions-transport-ws 的 Rollup 和 Apollo websocket

Question

我正在尝试使用:

• slim ( https://github.com/sveltejs/template ) 和
• Svelte-Apollo ( https://github.com/timhall/svelte-apollo )。

在编译时使用 Rollup ( https://github.com/sveltejs/template/blob/master/rollup.config.js ) 作为最终的 bundle (npm run build) 我得到了这个错误:

错误:“订阅未由 node_modules/subscriptions-transport-ws/dist/index.js 导出”

所以我想到用(https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports)来解决:

commonjs({
    namedExports: {
        './node_modules/subscriptions-transport-ws/dist/index.js': ['SubscriptionClient']
    }
}),

现在 Rollup 说:

index.js → public/bundle.js...

(!) Mixing named and default exports
Consumers of your bundle will have to use bundle['default'] to access the default export, which may not be what you want. Use `output.exports: 'named'` to disable this warning

(!) Missing shims for Node.js built-ins
Creating a browser bundle that depends on 'events', 'https', 'http', 'url', 'zlib' and 'stream'. You might need to include https://www.npmjs.com/package/rollup-plugin-node-builtins

(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
events (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js,  commonjs-external-events)
crypto (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js, node_modules\ws\lib\sender.js,  commonjs-external-crypto)
https (imported by node_modules\ws\lib\websocket.js,  commonjs-external-https)
net (imported by node_modules\ws\lib\websocket.js,  commonjs-external-net)
http (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js,  commonjs-external-http)
tls (imported by node_modules\ws\lib\websocket.js,  commonjs-external-tls)
url (imported by node_modules\ws\lib\websocket.js, node_modules\ws\lib\websocket-server.js,  commonjs-external-url)
stream (imported by node_modules\ws\lib\receiver.js,  commonjs-external-stream)
zlib (imported by node_modules\ws\lib\permessage-deflate.js,  commonjs-external-zlib)
bufferutil (imported by node_modules\ws\lib\buffer-util.js,  commonjs-external-bufferutil)
utf-8-validate (imported by node_modules\ws\lib\validation.js,  commonjs-external-utf-8-validate)
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
events (guessing 'events')
crypto (guessing 'crypto')
https (guessing 'https')
http (guessing 'http')
net (guessing 'net')
tls (guessing 'tls')
url (guessing 'url')
zlib (guessing 'zlib')
bufferutil (guessing 'bufferutil')
stream (guessing 'stream')
utf-8-validate (guessing 'utf8Validate')
created public/bundle.js in 13.8s

真是一团糟。我只是在使用面向 Web 的库，为什么它会提示 nodejs 依赖项？!

所以我在 rollup.config.js 中添加了这些行:

import builtins from 'rollup-plugin-node-builtins'
import globals from 'rollup-plugin-node-globals'
...
plugins: [
  globals(),
  builtins(),

并且之前的所有错误都消失了。

但现在在浏览器中我得到:

Uncaught ReferenceError: exports is not defined
    at client.js:45

它提示这一行(我认为):

Object.defineProperty(exports, "__esModule", { value: true });

我完全迷路了。

我创建了一个简单的存储库:https://codesandbox.io/s/zn1mnon8jl .

如果您在 codesandbox 中打开它，它就可以工作!奇迹!但是，如果您以 .zip 格式下载并执行 npm i && npm run dev，您就会发现问题所在。

现在该怎么办？

Answer 1

尝试在 nodeResolve 插件之前添加这个内联汇总插件

{
  // needed to specifically use the browser bundle for subscriptions-transport-ws
  name: 'use-browser-for-subscriptions-transport-ws',
  resolveId(id) {
    if (id === 'subscriptions-transport-ws')
      return path.resolve('node_modules/subscriptions-transport-ws/dist/client.js');
  },
},