FeathersJS项目socket.io-client经Webpack打包连接超时但CDN版本正常

解决方案 #

1. 确认版本一致性
   执行npm ls socket.io-client检查本地安装的客户端版本，必须和服务端socket.io大版本完全匹配。你使用的CDN版本为2.3.0，若本地安装的是3.x/4.x版本会因为协议不兼容导致连接超时，需要降级到2.x分支。
2. 修正模块导入方式
   socket.io-client v2.x为CommonJS格式，webpack处理ES模块默认导入时可能出现适配错误，替换原有导入语句：

// 替换 import io from 'socket.io-client'
import * as io from 'socket.io-client'
// 或使用CommonJS写法
const io = require('socket.io-client')

3. 避免重复加载冲突
   不要同时通过CDN和npm导入两份socket.io-client，如果你要使用npm打包的版本，直接删除template.html中的CDN引入行即可，两份实例同时加载会导致内部状态冲突。
4. 显式指定连接地址
   初始化客户端时显式传入服务端地址，避免路径解析异常：

app.io = io(window.location.origin)

5. 调整webpack转译规则
   修改webpack.common.js中的babel-loader排除规则，避免socket.io-client被不必要的转译：

{
  test: /\.jsx?$/,
  exclude: /node_modules(\/|\\)(?!(@feathersjs|debug|socket\.io-client))/,
  loader: 'babel-loader'
}

内容的提问来源于stack exchange，提问作者Joe Jankowiak