Question

我正在尝试使用：

苗条（https://github.com/sveltejs/template）和
天鹅绒的阿波罗（https://github.com/timhall/svelte-apollo）。

在编译（npm run build）时使用汇总（https://github.com/sveltejs/template/blob/master/rollup.config.js）作为最后的捆绑软件，我得到了这个错误：

Error: "Subcription is not exported by 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']
    }
}),

现在汇总说：

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');
  },
},

带有subscriptions-transport-ws的汇总和Apollo Websocket

1 个答案: