MQTT.js 和 Webpack - “WS 不是构造函数”答案

【问题标题】：MQTT.js and Webpack - "WS is not a constructor"MQTT.js 和 Webpack - “WS 不是构造函数”
【发布时间】：2019-03-14 09:44:35
【问题描述】：

我正在尝试捆绑我们的一个使用 MQTT.js 的微服务，但我正在努力解决非常奇怪的问题。

没有捆绑也可以正常工作，所以ws 可以在node_modules 中使用。

我认为重要的东西：

错误：

    TypeError: WS is not a constructor
        at WebSocketStream (dist/index.js:159329:16)
        at createWebSocket (dist/index.js:147450:10)
        at Object.buildBuilderBrowser (dist/index.js:147476:10)
        at MqttClient.wrapper [as streamBuilder] (dist/index.js:147937:36)
        at MqttClient._setupStream (dist/index.js:146471:22)
        at new MqttClient (dist/index.js:146452:8)
        at Function.connect (dist/index.js:147940:10)

webpack 配置：

const path = require('path');
const nodeExternals = require('webpack-node-externals');

const { NODE_ENV = 'production' } = process.env;

module.exports = {
  entry: { index: './src/index.ts' },
  mode: NODE_ENV,
  target: 'node',
  watch: NODE_ENV === 'development',
  externals: [nodeExternals()],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  node: {
    __dirname: false,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [{ loader: 'ts-loader', options: { transpileOnly: true } }],
      },
      {
        test: /(\.md|\.map)$/,
        loader: 'null-loader',
      },
    ],
  },
};

发生的函数：

createMqttClient(): MqttClient {
    return mqtt.connect(this.mqttOptions.url, { ...this.mqttOptions.options });
  }

网址如：ssl://url-to-our-mqtt

有人可以帮忙吗？

【问题讨论】：

我认为第一步是检查 WS 在生成的包中是否真的可用。如果不是，您知道您正面临一个构建问题，即模块由于某种原因被排除在构建之外。
尝试在不压缩的情况下运行 webpack。就像在开发模式下一样。如果它有效，那么问题在于 webpack 的缩小。这就是它崩溃的原因。在此处阅读更多信息webpack.js.org/guides/production/#minification webpack.js.org/concepts/mode/#mode-production
@Grynets 它在没有缩小的情况下运行。如果它被缩小，我无法追踪这个问题。
能否请您说明您如何以及在何处导入ws？

标签： javascript node.js webpack webpack-4

【解决方案1】：

我也遇到了同样的问题。对我来说问题是我使用了

 plugins: [
   new webpack.NormalModuleReplacementPlugin(/^mqtt$/, "mqtt/dist/mqtt.js"),
 ],

在 webpack.config.js 中修复 mqtt.js 附带的 shebang 错误，因为它是一个 CLI 工具。然后我使用了

  {
    test: [
      /node_modules[/\\]mqtt[/\\]mqtt.js/,
      /node_modules[/\\]mqtt[/\\]bin[/\\]sub.js/,
      /node_modules[/\\]mqtt[/\\]bin[/\\]pub.js/,
    ],
    loader: 'shebang-loader'
  },

我的问题已经解决了。您是否还在导入中使用 mqtt/dist/mqtt.js 而不是 mqtt，或者如果您执行与我类似的操作，我在上面发布的 shebang-loader 规则可能会解决您的问题。

【讨论】：

【解决方案2】：

我对 Amazon aws-iot-device-sdk-js 和 Microsoft azure-iot-device-mqtt 也有同样的体验，它们都包含 mqtt。

最初的问题是构建错误：

ERROR in ./node_modules/mqtt/mqtt.js Module parse failed: Unexpected character '#' (1:0)

这个错误是由包mqtt引起的。三个文件（mqtt.js、pub.js 和 sub.js）包含一个 shebang 行

#!/usr/bin/env node

使用模块替换的解决方案建议了一些地方

plugins: [
   new webpack.NormalModuleReplacementPlugin(/^mqtt$/, "mqtt/dist/mqtt.js"),
 ],

不幸地用运行时错误改变了构建错误

TypeError: WS is not a constructor

正如其他答案中提到的，可以将 webpack 配置为 (https://webpack.js.org/concepts/loaders/) 以使用 shebang 加载器 (https://www.npmjs.com/package/shebang-loader)

TL;DR

安装shebang-loader

npm install shebang-loader --save

在 webpack.config.js 中使用加载器

module.exports = {
...
    module: {
        rules: [
            {
                test:
                    [
                        /.*mqtt\.js$/,
                        /.*sub\.js$/,
                        /.*pub\.js$/
                    ],
                use: 'shebang-loader'
            }
        ]
    }
}

【讨论】：