一个引号引发的血案

在使用 socket.io 时遇到一个看似很大的问题，花了两个小时发现是一个引号引发的血案。并不是什么技术难题，但是这次解决问题的过程给我了很大的感悟。

遇到问题要先分析其原因，弄清楚其本质。不要光想着寻求帮助，例如搜索之类的手段。log 信息中其实包含了重要的线索，不要忽视。

有句话是这么说的：遇到问题不要老是认为是机器、环境的锅，回头看看，多半都是自己写的程序有错。

问题很简单，我在根据 socket.io api 简单引入

import io from 'socket.io-client'

只是简单的引入，没有任何其他的代码。报错：

Uncaught SyntaxError: Unexpected token :

    at Object../node_modules/socket.io-client/node_modules/debug/src/browser.js (app.js:4627)

    at __webpack_require__ (app.js:679)

    at fn (app.js:89)

    at Object.eval (url.js?5759:7)

    at eval (url.js:77)

    at Object../node_modules/socket.io-client/lib/url.js (app.js:4620)

    at __webpack_require__ (app.js:679)

    at fn (app.js:89)

    at eval (index.js?0e64:6)

    at Object../node_modules/socket.io-client/lib/index.js (app.js:4592)

粗略一看，语法错误，冒号的锅。好，那么解决吧。怎么解决呢，看文档噻，去搜索噻。花了大量的时间去查文档，搜索，并没有用。回过头来自己仔细琢磨一下。

首先，语法错误，看看哪里报的错呢？/node_modules/socket.io-client/node_modules/debug/src/browser.js (app.js:4627)

浏览器里看看源码吧。

image.png

就是这里，不认真看，不认真想，以为是环境变量的问题。又朝着环境变量的方向一顿查，不思考，就是去搜索，去找原因。可是原因在哪里，就在代码里面啊。

早就知道是冒号的锅，冒号在哪里？冒号就在这里啊，http 后面的这个冒号啊。去模块的源码里看看，源码是这样子的:

// If debug isn't set in LS, and we're in Electron, try to load $DEBUG

  if (!r && typeof process !== 'undefined' && 'env' in process) {

    r = process.env.DEBUG;

  }

再对比一下，process.env就是一个对象，需要去取 DEBUG 这个环境变量嘛。源码里也写的清清楚楚是 Object 的，那么在 URL_PREFIX 应该是一个字符串啊。这里一看就不对啊，没有引号啊。

再去看 URL_PREFIX 在哪里定义的，这个其实不陌生啊，项目里 /config/prod.env.js 里

'use strict'

module.exports = {

  NODE_ENV: '"production"',

  URL_PREFIX: '[http://192.168.43.193:3000/'](http://192.168.43.193:3000/')

}

对比一下NODE_ENV发现问题了，应该是双重引号啊。改一下

module.exports = {

 URL_PREFIX: '"[http://192.168.43.193:3000/"'](http://192.168.43.193:3000/')

}

重新 start 一下，这不是没毛病嘛。

总结一下，就像文章开始说的，根据log 信息，仔细想一下这个问题并不难的。难的就在自己把问题想复杂了，而且不思考。反思……