vue-socket.io 对IE浏览器（IE10+）的兼容性修复

    最近做一个web端智能机器人聊天系统，由于前端用的vue框架，就选用了vue-socket.io,github地址：https://github.com/MetinSeylan/Vue-Socket.io。

  最终运行之后，谷歌，火狐都没有问题，试了一下ie,ie9，ie10，ie11都运行不了，看了一下控制台，报错了（其实就是ie浏览器不兼es6的语法）。万恶的ie，没想到ie11也不支持。

 网上搜索了很多解决方案，最终目的都是对引入的vue-socket.io 的js再编译打包之类的思路，试过之后都没有效果。

 最终决定从源头上来解决。

对于了解nodejs的话，其实我们项目中引入 

import VueSocketIO from 'vue-socket.io'

是从node_modules中找到vue-socket.io文件夹下的dist目录下的vue-socketio.js

所以有的提议在这里改，但是这样不利于后期多人操作，或项目开发环境的变更。

通过以上的分析，我的解决思路是对vue-socket.io进行重新打包编译，生成的 vue-socketio.js单独引入到项目中，不再通过node_modules文件夹引入。

从github项目（https://github.com/MetinSeylan/Vue-Socket.io）下载的vue-socket.io 项目，安装依赖包之后，npm run build之后，打开dist目录中的vue-socketio.js,通过编译后代码，全局搜索后发现，js文件代码中仍然存在es6中的箭头函数 =>之类，这也是为什么ie报错的根本原因。

解决方法：

以下是vue-socket.io 项目的 package.json和webpack.config.js ，重新添加了依赖包和编译的配置信息，对原的vue-socket.io 项目进行替换，删除原来的node_modules，重新安装包 npm install 之后再进行npm run build，生成dist/vue-socketio.js 文件放到你目前项目的下。(这里是对vue-socket.io 这个项目，不是你的自身项目)

在你目前项目中src下新建socket文件放入编译后dis/vue-socketio.js文件，

把你目前项目引入的

import VueSocketIO from 'vue-socket.io'

替换成 

import VueSocketIO from 'src/vue-socket.io' //引入路径根据实际项目情况而定，这里只是参考

以下是修改后的package.json和webpack.config.js：

package.json

{
  "name": "vue-socket.io",
  "author": "Metin Seylan <metinsyln@gmail.com>",
  "version": "3.0.10",
  "description": "socket.io implementation for Vue.js and Vuex",
  "main": "dist/vue-socketio.js",
  "scripts": {
    "build": "webpack --mode=production --progress --hide-modules"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/MetinSeylan/Vue-Socket.io.git"
  },
  "keywords": [
    "vuejs",
    "socket",
    "vue",
    "socket.io",
    "websocket",
    "socket.io-client",
    "realtime",
    "flux",
    "vuex",
    "redux"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/MetinSeylan/Vue-Socket.io/issues"
  },
  "homepage": "https://github.com/MetinSeylan/Vue-Socket.io",
  "dependencies": {
    "socket.io-client": "^2.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.7",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/preset-env": "^7.7.7",
    "@babel/runtime": "^7.7.7",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-classes": "^7.7.6",
    "cross-env": "^5.2.0",
    "webpack": "^4.41.4",
    "webpack-cli": "^3.3.10"
  }
}

webpack.config.js

module.exports = {
    mode: process.env.NODE_ENV,
    entry: ["./src/index.js"],
    output: {
        library: "VueSocketIO",
        libraryTarget: "umd",
        libraryExport: "default",
        filename: "vue-socketio.js",
        globalObject: "typeof self !== 'undefined' ? self : this"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        "presets": [
                            ["@babel/preset-env", {
                                "targets": {
                                    "browsers": ["> 1%", "last 2 versions"]
                                }
                            }]
                        ],
                        plugins: [
                            "@babel/plugin-proposal-class-properties",
                            "@babel/plugin-transform-classes"
                        ]
                    }
                }
            }
        ]
    }
};

总结：

其实就是重新对vue-socket.io项目重新打包编译，把编译生成的js在项目src中引入，不在通过node_modules下引入。