在转换的ES5 Vue组件代码中导致Uncaught TypeError的Babel

时间:2016-09-15 11:55:04

标签: javascript node.js babeljs vue.js transpiler

处理需要通过套接字发送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组件文件中。更改主要涉及通过HTML按钮触发的套接字连接将数据从HTML文本字段(绑定data参数中包含的默认文本)传递到侦听服务器。但是我现在还没有超越按钮触发器。

我得到的是: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会破坏该行(两个窗口中代码中<---标记的位置)。

不知何故,我认为这与Unexpected "Uncaught TypeError: XXX is not a constructor" errors with Babel and ES6有关,但在 的情况下,解决方案围绕在require语句中添加访问默认属性。我不确定如何在vue组件中使用import完成相同的操作。

任何朝着正确方向的刺激都会受到赞赏。

0 个答案:

没有答案