javascript - トランスパイルされた ES5 Vue コンポーネントコードで Uncaught TypeError を引き起こす Babel

Question

ソケット経由で JSON オブジェクトを送信する必要がある小さな Node.js プロジェクトに取り組んでいます。JsonSocket ( https://github.com/sebastianseilund/node-json-socket ) が私のニーズを満たし、その作成者が提供する単純なサーバー/クライアントのデモを実行するとうまく機能することがわかりました。

デモ クライアント コード ( https://github.com/sebastianseilund/node-json-socket#simple-clientserver-example ) をVue.js-Babel-Browserifyプロジェクト フレームワークに適応させ、コードを .vue コンポーネントに配置しています。ファイル。data変更には、主に、HTML ボタンによってトリガーされるソケット接続を介して、HTML テキスト フィールド (バインディング パラメーターに含まれる既定のテキスト) からリッスン サーバーにデータを渡すことが含まれます。しかし、私はこの時点でボタントリガーを超えていません.

私が得ているのはUncaught TypeError: _net2.default.Socket is not a constructor、このトランスパイルされたコードでソケット経由でデータを送信するときです:var socket = new _jsonSocket2.default(new _net2.default.Socket());

以下は元の .vue コードです。

import net from 'net'
import JsonSocket from 'json-socket'

export default {
  data () {
    return {
      header: 'Login',
      messageStuff: '{ "cmd": "send", "what": { "this": "that" } }'
    }
  },
  methods: {
    submitMessage() {
      var stuff = JSON.parse(this.messageStuff)
      var port = 8069
      var host = '192.168.11.5'

      var socket = new JsonSocket(new net.Socket())  <-- *** source of the culprit!  ***
      socket.connect(port, host)

      socket.on('connect', function () {
        socket.sendMessage(stuff)
        socket.on('message', function (message) {
          console.log('Server replies...')
          console.dir(message)
        })
      })
    }
  }
}

そして、これがスクリプトの関連セクションのトランスパイルされたコードです。

    var _net = require('net');
    var _net2 = _interopRequireDefault(_net);
    var _jsonSocket = require('json-socket');
    var _jsonSocket2 = _interopRequireDefault(_jsonSocket);

    function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

    exports.default = {
      data: function data() {
        return {
          header: 'Login',
          messageStuff: '{ "cmd": "send", "what": { "this": "that" } }'
        };
      },

      methods: {
        submitMessage: function submitMessage() {
          var stuff = JSON.parse(this.messageStuff);
          var port = 8069;
          var host = '192.168.11.5';

          var socket = new _jsonSocket2.default(new _net2.default.Socket()); <-- ***  the culprit!  ***
          socket.connect(port, host);

          socket.on('connect', function () {
            socket.sendMessage(stuff);
            socket.on('message', function (message) {
              console.log('Server says...');
              console.dir(message);
            });
          });
        }
      }
    };
    })()

Babel が行を壊した理由がわかりません (<---マークは両方のウィンドウのコードにあります)。

どういうわけか、これはBabelとES6の予期しない「Uncaught TypeError: XXX is not a constructor」エラーに関連しているように感じますが、その場合、解決策はrequireステートメントでデフォルトプロパティへのアクセスを追加することを中心に展開しました. importvue コンポーネント内で 同じことを達成する方法がわかりません。

正しい方向への任意のプロディングをいただければ幸いです。