Babel causing Uncaught TypeError in transpiled ES5 Vue component code

问题

Working on a small Node.js project that needs to send JSON objects over sockets. I discovered that JsonSocket (https://github.com/sebastianseilund/node-json-socket) served my needs and running the simple server/client demos provided by that author works great.

I am adapting the demo Client code (https://github.com/sebastianseilund/node-json-socket#simple-clientserver-example) to a Vue.js-Babel-Browserify project framework and placing the code in a .vue component file. Changes primarily involve passing data from an HTML text field (default text included in the binding data parameter) to the listening server via a socket connection, triggered by an HTML button. But I'm not getting beyond the button trigger at this point.

What I am getting is: Uncaught TypeError: _net2.default.Socket is not a constructor when sending the data over the socket with this transpiled code: var socket = new _jsonSocket2.default(new _net2.default.Socket());

Below is the original .vue code:

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)
        })
      })
    }
  }
}

And here is the transpiled code of the relevant section of the script:

    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);
            });
          });
        }
      }
    };
    })()

Not sure why Babel mangled the line (where the <--- mark is in the code in both windows).

Somehow I feel that this is related to Unexpected "Uncaught TypeError: XXX is not a constructor" errors with Babel and ES6 but in that case the solution revolved around adding access the default property in a require statement. I'm not sure how I could accomplish the same with import inside the vue component.

Any prodding in the right direction would be appreciated.

来源：https://stackoverflow.com/questions/39510407/babel-causing-uncaught-typeerror-in-transpiled-es5-vue-component-code

标签

javascript

node.js

babeljs

Vue.js

transpiler