安装 Mqtt 4.3.7 时 Vue2 项目抛出错误

Question

我正在尝试通过npm在vue2项目中安装mqtt。 但是，它不断抛出以下错误：

 error  in ./node_modules/mqtt/lib/client.js

Module parse failed: Unexpected token (118:38)
You may need an appropriate loader to handle this file type.
|               if (alias) {
|                 packet.topic = ''
|                 packet.properties = { ...(packet.properties), topicAlias: alias }
|                 debug('applyTopicAlias :: auto assign(use) topic: %s - alias: %d', topic, alias)
|               } else {

 @ ./node_modules/mqtt/lib/connect/index.js 3:19-39

我检查了./node_modules/mqtt/lib/client.js 以确保没有可能导致此问题的不可打印的 unicode 字符，但没有。 我也试过降级到以前的mqtt版本，比如2.18.9、4.2.2和4.3.0，但是应用程序进入了无限加载循环。 从错误中，我可以推断 webpack 可能是此问题的根本原因，因为它要求添加适当的加载程序，但我对此有点迷茫。 有人能给我一些关于如何将此加载程序添加到 webpack.config.js 的见解吗？ 或者如果有更好的方法来解决这个问题？

这是我的 package.json

{
  "name": "mobile-attendant",
  "version": "1.3.0",
  ,
  "scripts": {
    "dev": "webpack-dev-server --host localhost --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "copy-fonts": "cpy node_modules/framework7-icons/fonts/*.* src/fonts && cpy node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2} src/fonts",
    "postinstall": "npm run copy-fonts"
  },
  "files": [
    "dist/**/*"
  ],
  "dependencies": {
    "axios": "0.18.0",
    "framework7": "2.3.1",
    "framework7-icons": "0.8.9",
    "framework7-vue": "2.3.0",
    "material-design-icons": "3.0.1",
    "mqtt": "^4.3.7",
    "simple-keyboard": "2.29.47",
    "vue": "2.5.21",
    "vue-i18n": "8.21.1",
    "vue-resource": "1.5.1",
    "webpack-war-plugin": "1.0.0-beta.3"
  },
  "devDependencies": {
    "autoprefixer": "8.0.0",
    "babel-core": "6.26.3",
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "7.1.5",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-plugin-transform-vue-jsx": "3.7.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-stage-2": "6.24.1",
    "chalk": "2.4.2",
    "copy-webpack-plugin": "4.6.0",
    "cpy-cli": "1.0.1",
    "css-loader": "0.28.11",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.11",
    "friendly-errors-webpack-plugin": "1.7.0",
    "html-webpack-plugin": "2.30.1",
    "moment": "2.24.0",
    "node-notifier": "5.3.0",
    "node-sass": "4.11.0",
    "optimize-css-assets-webpack-plugin": "3.2.0",
    "ora": "1.4.0",
    "portfinder": "1.0.20",
    "postcss-import": "11.1.0",
    "postcss-loader": "2.1.6",
    "postcss-url": "7.3.2",
    "rimraf": "2.6.3",
    "sass-loader": "7.1.0",
    "semver": "5.6.0",
    "shelljs": "0.7.8",
    "style-loader": "0.21.0",
    "uglifyjs-webpack-plugin": "1.3.0",
    "url-loader": "0.5.9",
    "vue-loader": "13.7.3",
    "vue-style-loader": "3.1.2",
    "vue-template-compiler": "2.5.21",
    "webpack": "3.12.0",
    "webpack-bundle-analyzer": "2.13.1",
    "webpack-dev-server": "2.11.3",
    "webpack-merge": "4.2.1"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

这是 webpack.config.dev.js

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const path = require('path');

function resolvePath(dir) {
  return path.join(__dirname, '..', dir);
}

module.exports = {
  mode: 'development',
  entry: [
    './src/app.js'
  ],
  output: {
    path: resolvePath('www'),
    filename: 'app.js',
    publicPath: ''
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolvePath('src'),
    }
  },
  devServer: {
    hot: true,
    open: true,
    compress: true,
    contentBase: '/www/',
    watchOptions: {
      poll: true
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        include: [
          resolvePath('src'),
          resolvePath('node_modules/framework7'),
          resolvePath('node_modules/framework7-vue'),
          resolvePath('node_modules/template7'),
          resolvePath('node_modules/dom7'),
          resolvePath('node_modules/ssr-window'),
        ],
      },
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
      {
        test: /\.styl(us)?$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'stylus-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'images/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'media/[name].[hash:7].[ext]'
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[hash:7].[ext]'
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify('development'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './src/index.html',
      inject: true,
    }),
    new MiniCssExtractPlugin({
      filename: 'app.css'
    }),
    new CopyWebpackPlugin([{
      from: resolvePath('static'),
      to: resolvePath('www/static'),
    }]),
  ]
}

Answer 1

该项目的 GitHub 报告了类似的问题。 唯一建议解决方案的评论（用中文写）说他们在降级到 mqtt v4.2.7 后发现成功。 评论（谷歌翻译）说：

我解决了。 我安装的相关插件自动安装了4.3.7版本的mqtt。 我删除了node_modules中的mqtt文件夹，重新安装了mqtt@4.2.7

另一个可能的选项是Vue-Mqtt ，它看起来是 Vue 特定的 mqtt 实现/包装器