fix(dependency): Upgrade all project dependencies.

- Webpack 4 to Webpack 5
- Vue 2.6 to Vue 2.7
- Vue CLI 4 to Vue CLI 5

Author: martinadamsdev

.eslintrc.js

@@ -1,25 +1,25 @@
 module.exports = {
   root: true,
   env: {
-    node: true
+    node: true,
   },
   extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
   parserOptions: {
-    parser: "babel-eslint"
+    parser: "@babel/eslint-parser",
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
   overrides: [
     {
       files: [
         "**/__tests__/*.{j,t}s?(x)",
-        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+        "**/tests/unit/**/*.spec.{j,t}s?(x)",
       ],
       env: {
-        jest: true
-      }
-    }
-  ]
+        jest: true,
+      },
+    },
+  ],
 };

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 yarn.lock
+dist
 
 # local env files
 .env.local

package.json

@@ -9,31 +9,33 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "cesium": "^1.73.0",
-    "core-js": "^3.6.5",
-    "vue": "^2.6.12",
-    "vue-router": "^3.2.0",
-    "vuex": "^3.4.0"
+    "cesium": "1.97.0",
+    "core-js": "3.25.0",
+    "vue": "2.7.10",
+    "vue-router": "3.6.5",
+    "vuex": "3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.0.3",
-    "vue-template-compiler": "^2.6.11",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "prettier": "^1.19.1",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.26.11",
-    "dart-sass": "^1.25.0",
-    "sass-loader": "^10.0.2",
-    "copy-webpack-plugin": "^6.0.3",
-    "webpack": "^4.44.2"
+    "@babel/core": "^7.19.0",
+    "@babel/eslint-parser": "7.18.9",
+    "@vue/cli-plugin-babel": "5.0.8",
+    "@vue/cli-plugin-eslint": "5.0.8",
+    "@vue/cli-plugin-router": "5.0.8",
+    "@vue/cli-plugin-unit-jest": "5.0.8",
+    "@vue/cli-plugin-vuex": "5.0.8",
+    "@vue/cli-service": "5.0.8",
+    "@vue/eslint-config-prettier": "7.0.0",
+    "@vue/test-utils": "1.3.0",
+    "copy-webpack-plugin": "11.0.0",
+    "eslint": "8.22.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "9.4.0",
+    "jest": "27.5.1",
+    "node-polyfill-webpack-plugin": "^2.0.1",
+    "prettier": "2.7.1",
+    "sass": "1.54.8",
+    "sass-loader": "13.0.2",
+    "vue-template-compiler": "2.7.10",
+    "webpack": "5.74.0"
   }
 }

src/main.js

@@ -8,5 +8,5 @@ Vue.config.productionTip = false;
 new Vue({
   router,
   store,
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount("#app");

src/router/index.js

@@ -7,12 +7,13 @@ const routes = [
   {
     path: "/",
     name: "Map",
-    component: () => import(/* webpackChunkName: "map" */ "../views/Map.vue")
-  }
+    component: () =>
+      import(/* webpackChunkName: "map" */ "../views/CesiumViewer.vue"),
+  },
 ];
 
 const router = new VueRouter({
-  routes
+  routes,
 });
 
 export default router;

src/store/index.js

@@ -7,5 +7,5 @@ export default new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
-  modules: {}
+  modules: {},
 });

src/views/Map.vue renamed to src/views/CesiumViewer.vue

@@ -7,7 +7,7 @@ import "cesium/Build/Cesium/Widgets/widgets.css";
 import * as Cesium from "cesium";
 
 export default {
-  name: "Map",
+  name: "CesiumViewer",
   mounted() {
     this.init();
   },
@@ -18,7 +18,7 @@ export default {
       let imageryLayers = viewer.imageryLayers;
 
       let googleMap = new Cesium.UrlTemplateImageryProvider({
-        url: "http://www.google.com/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}"
+        url: "http://www.google.com/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}",
       });
 
       imageryLayers.addImageryProvider(googleMap);
@@ -33,12 +33,12 @@ export default {
         orientation: {
           heading: Cesium.Math.toRadians(0),
           pitch: Cesium.Math.toRadians(-90),
-          roll: 0.0
+          roll: 0.0,
         },
-        duration: 10 // fly time 10s
+        duration: 10, // fly time 10s
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

vue.config.js

@@ -1,34 +1,38 @@
 // vue.config.js
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 const webpack = require("webpack");
 
 module.exports = {
   publicPath:
     process.env.NODE_ENV === "production" ? "/\n" + "vue-cesium-example/" : "/",
   configureWebpack: {
+    node: {},
     plugins: [
       // Copy Cesium Assets, Widgets, and Workers to a static directory
       new CopyWebpackPlugin({
         patterns: [
           { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" },
           {
             from: "node_modules/cesium/Build/Cesium/ThirdParty",
-            to: "ThirdParty"
+            to: "ThirdParty",
           },
           { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" },
-          { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" }
-        ]
+          { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" },
+        ],
       }),
+      new NodePolyfillPlugin(),
       new webpack.DefinePlugin({
         // Define relative base path in cesium for loading assets
-        CESIUM_BASE_URL: JSON.stringify("")
-      })
+        CESIUM_BASE_URL: JSON.stringify(""),
+      }),
     ],
     module: {
       // Removes these errors: "Critical dependency: require function is used in a way in which dependencies cannot be statically extracted"
       // https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/6
       unknownContextCritical: false,
-      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
-    }
-  }
+      unknownContextRegExp:
+        /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/,
+    },
+  },
 };