babel 6 to 7, webpack 3 to 5 etc

.eslintrc.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   parserOptions: {
     sourceType: 'module'
   },

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules/
+dist
 npm-debug.log*
 yarn-error.log*
 yarn-debug.log*

.nvmrc

@@ -1 +1 @@
-8.1.2
+16.15.0

babel.config.json

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+} 

package.json

@@ -4,7 +4,7 @@
   "description": "native websocket implemantation for vuejs and vuex",
   "main": "dist/build.js",
   "scripts": {
-    "build": "eslint --ext .js src && webpack --progress --hide-modules",
+    "build": "eslint --ext .js src && webpack --progress",
     "lint": "eslint --ext .js src",
     "unit": "karma start test/unit/karma.conf.js",
     "test": "karma start test/unit/karma.conf.js --single-run "
@@ -30,33 +30,34 @@
   },
   "homepage": "https://github.com/nathantsoi/vue-native-websocket#readme",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "^7.0.0",
-    "babel-preset-es2015": "^6.24.1",
-    "chai": "^4.0.2",
-    "eslint": "^3.19.0",
-    "eslint-config-standard": "^10.2.1",
-    "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-node": "^4.2.2",
-    "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^3.0.1",
+    "@babel/cli": "^7.18.9",
+    "@babel/core": "^7.18.9",
+    "@babel/eslint-parser": "^7.18.9",
+    "@babel/preset-env": "^7.18.9",
+    "babel-loader": "^8.2.5",
+    "chai": "^4.3.6",
+    "eslint": "^8.20.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.2.4",
+    "eslint-plugin-promise": "^6.0.0",
     "exports-loader": "^0.6.4",
-    "karma": "^1.7.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-sinon-chai": "^1.3.1",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "^0.0.31",
-    "karma-webpack": "^2.0.3",
-    "mocha": "^3.4.2",
+    "karma": "^6.4.0",
+    "karma-chrome-launcher": "^3.1.1",
+    "karma-coverage": "^2.2.0",
+    "karma-mocha": "^2.0.1",
+    "karma-sinon-chai": "^2.0.2",
+    "karma-sourcemap-loader": "^0.3.8",
+    "karma-spec-reporter": "^0.0.33",
+    "karma-webpack": "^5.0.0",
+    "mocha": "^9.2.1",
     "mock-socket": "^6.1.0",
     "script-loader": "^0.7.0",
-    "sinon": "^2.3.6",
-    "sinon-chai": "^2.11.0",
-    "vue": "^2.3.4",
-    "webpack": "^3.0.0"
-  },
-  "dependencies": {}
-}
+    "sinon": "^13.0.1",
+    "sinon-chai": "^3.7.0",
+    "terser-webpack-plugin": "^5.3.3",
+    "vue": "^2.6.14",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
+  }
+}

src/Emitter.js

@@ -6,14 +6,14 @@ class Emitter {
   addListener (label, callback, vm) {
     if (typeof callback === 'function') {
       this.listeners.has(label) || this.listeners.set(label, [])
-      this.listeners.get(label).push({callback: callback, vm: vm})
+      this.listeners.get(label).push({ callback, vm })
       return true
     }
     return false
   }
 
   removeListener (label, callback, vm) {
-    let listeners = this.listeners.get(label)
+    const listeners = this.listeners.get(label)
     let index
 
     if (listeners && listeners.length) {
@@ -34,7 +34,7 @@ class Emitter {
   }
 
   emit (label, ...args) {
-    let listeners = this.listeners.get(label)
+    const listeners = this.listeners.get(label)
 
     if (listeners && listeners.length) {
       listeners.forEach((listener) => {

src/Main.js

@@ -34,8 +34,8 @@ export default {
 
     Vue.mixin({
       created () {
-        let vm = this
-        let sockets = this.$options['sockets']
+        const vm = this
+        const sockets = this.$options.sockets
 
         if (hasProxy) {
           this.$options.sockets = new Proxy({}, {
@@ -68,7 +68,7 @@ export default {
       },
       beforeDestroy () {
         if (hasProxy) {
-          let sockets = this.$options['sockets']
+          const sockets = this.$options.sockets
 
           if (sockets) {
             Object.keys(sockets).forEach((key) => {

src/Observer.js

@@ -28,7 +28,7 @@ export default class {
   }
 
   connect (connectionUrl, opts = {}) {
-    let protocol = opts.protocol || ''
+    const protocol = opts.protocol || ''
     this.WebSocket = opts.WebSocket || (protocol === '' ? new WebSocket(connectionUrl) : new WebSocket(connectionUrl, protocol))
     if (this.format === 'json') {
       if (!('sendObj' in this.WebSocket)) {

webpack.config.js

@@ -1,36 +1,31 @@
 var path = require('path')
-var webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
 
 module.exports = {
   entry: ['./src/Main.js'],
+  mode: 'production',
   output: {
     path: path.resolve(__dirname, './dist'),
     filename: 'build.js',
     library: ['VueNativeSock'],
     libraryTarget: 'umd'
   },
-  devtool: "source-map",
-  plugins: [
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ],
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()]
+  },
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
     }
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: {
-          presets: ['es2015']
-        }
+        use: ['babel-loader']
       }
     ]
   }