Upgrade frontend dependencies

2021-03-19 15:25:43 +08:00
parent 5434ab03b2
commit c3cf7fe170
4 changed files with 18169 additions and 8179 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,23 +1,23 @@
 module.exports = {
  parserOptions: {
-    parser: "babel-eslint"
+    parser: "babel-eslint",
  },
  root: true,
  env: {
-    node: true
+    node: true,
  },
  extends: [
    "plugin:vue/recommended",
    "eslint:recommended",
-    "prettier/vue",
-    "plugin:prettier/recommended"
+    "prettier",
+    "plugin:prettier/recommended",
  ],
  rules: {
    "vue/component-name-in-template-casing": ["error", "PascalCase"],
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
  },
  globals: {
-    $nuxt: true
-  }
+    $nuxt: true,
+  },
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -3,48 +3,51 @@
  "version": "0.0.0",
  "description": "Sshwifty Web Front-end Project",
  "main": "",
-  "dependencies": {},
  "devDependencies": {
-    "@babel/core": "^7.13.8",
-    "@babel/plugin-transform-runtime": "^7.13.9",
-    "@babel/preset-env": "^7.13.9",
+    "@babel/core": "^7.13.10",
+    "@babel/plugin-transform-runtime": "^7.13.10",
+    "@babel/preset-env": "^7.13.10",
    "@babel/register": "^7.13.8",
-    "@babel/runtime": "^7.13.9",
+    "@babel/runtime": "^7.13.10",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
-    "buffer": "^5.7.1",
+    "buffer": "^6.0.3",
    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.4.1",
-    "css-loader": "^4.3.0",
-    "eslint": "^7.21.0",
-    "eslint-config-prettier": "^6.15.0",
+    "copy-webpack-plugin": "^8.0.0",
+    "css-loader": "^5.1.3",
+    "css-minimizer-webpack-plugin": "^1.3.0",
+    "eslint": "^7.22.0",
+    "eslint-config-prettier": "^8.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "favicons-webpack-plugin": "^4.2.0",
+    "eslint-plugin-vue": "^7.7.0",
+    "favicons": "^6.2.1",
+    "favicons-webpack-plugin": "^5.0.2",
    "file-loader": "^6.2.0",
    "fontfaceobserver": "^2.1.0",
    "hack-font": "^3.3.0",
-    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.5.2",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.1",
    "iconv-lite": "^0.6.2",
-    "imagemin-webpack-plugin": "^2.4.2",
-    "mini-css-extract-plugin": "^0.11.3",
-    "mocha": "^8.3.0",
+    "image-minimizer-webpack-plugin": "^2.2.0",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-mozjpeg": "^9.0.0",
+    "imagemin-pngquant": "^9.0.2",
+    "imagemin-svgo": "^9.0.0",
+    "mini-css-extract-plugin": "^1.3.9",
+    "mocha": "^8.3.2",
    "normalize.css": "^8.0.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "prettier": "^2.2.1",
    "roboto-fontface": "^0.10.0",
-    "style-loader": "^1.3.0",
-    "terser-webpack-plugin": "^4.2.3",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-template-compiler": "^2.6.12",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-manifest-plugin": "^2.2.0",
-    "xterm": "^4.10.0",
-    "xterm-addon-fit": "^0.4.0",
+    "webpack": "^5.26.3",
+    "webpack-cli": "^4.5.0",
+    "xterm": "^4.11.0",
+    "xterm-addon-fit": "^0.5.0",
    "xterm-addon-web-links": "^0.4.0"
  },
  "scripts": {
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -18,17 +18,21 @@
 const webpack = require("webpack"),
  { spawn } = require("child_process"),
  path = require("path"),
+  os = require("os"),
  HtmlWebpackPlugin = require("html-webpack-plugin"),
  MiniCssExtractPlugin = require("mini-css-extract-plugin"),
-  OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin"),
-  VueLoaderPlugin = require("vue-loader/lib/plugin"),
+  CssMinimizerPlugin = require("css-minimizer-webpack-plugin"),
+  ImageMinimizerPlugin = require("image-minimizer-webpack-plugin"),
+  { VueLoaderPlugin } = require("vue-loader"),
  FaviconsWebpackPlugin = require("favicons-webpack-plugin"),
-  ManifestPlugin = require("webpack-manifest-plugin"),
-  ImageminPlugin = require("imagemin-webpack-plugin").default,
  CopyPlugin = require("copy-webpack-plugin"),
  TerserPlugin = require("terser-webpack-plugin"),
  { CleanWebpackPlugin } = require("clean-webpack-plugin");

+const inDevMode = process.env.NODE_ENV === "development";
+
+process.traceDeprecation = true;
+
 let appSpawnProc = null,
  appBuildProc = null;

@@ -182,12 +186,11 @@ module.exports = {
  entry: {
    app: path.join(__dirname, "ui", "app.js"),
  },
-  devtool:
-    process.env.NODE_ENV === "development" ? "inline-source-map" : "source-map",
+  devtool: inDevMode ? "inline-source-map" : "source-map",
  output: {
    publicPath: "/sshwifty/assets/",
    path: path.join(__dirname, ".tmp", "dist"),
-    filename: process.env.NODE_ENV === "development" ? "[id].js" : "[hash].js",
+    filename: "[contenthash].js",
  },
  resolve: {
    alias: {
@@ -200,80 +203,60 @@ module.exports = {
    runtimeChunk: true,
    mergeDuplicateChunks: true,
    flagIncludedChunks: true,
-    occurrenceOrder: true,
    providedExports: true,
    usedExports: true,
-    splitChunks:
-      process.env.NODE_ENV === "development"
-        ? {}
-        : {
-            chunks: "all",
-            minSize: 102400,
-            maxSize: 244000,
-            automaticNameDelimiter: ".",
-            automaticNameMaxLength: 8,
-            maxAsyncRequests: 8,
-            maxInitialRequests: 8,
-            name: true,
-          },
-    minimize: process.env.NODE_ENV !== "development",
-    minimizer:
-      process.env.NODE_ENV === "development"
-        ? []
-        : [
-            new TerserPlugin({
-              test: /\.js(\?.*)?$/i,
-              terserOptions: {
-                warnings: false,
-                parse: {},
-                compress: {},
-                mangle: true,
-                module: false,
-                passes: 2,
-                output: {
-                  beautify: false,
-                  comments: false,
-                },
-                toplevel: false,
-                nameCache: null,
-                ie8: false,
-                keep_classnames: false,
-                keep_fnames: false,
-                safari10: false,
-                extractComments: /^\**!|@preserve|@license|@cc_on/i,
-              },
-            }),
-          ],
+    splitChunks: inDevMode
+      ? false
+      : {
+          chunks: "all",
+          minSize: 102400,
+          maxSize: 244000,
+          maxAsyncRequests: 6,
+          maxInitialRequests: 6,
+          name: false,
+        },
+    minimize: !inDevMode,
+    minimizer: inDevMode
+      ? []
+      : [
+          new CssMinimizerPlugin(),
+          new TerserPlugin({
+            test: /\.js(\?.*)?$/i,
+            terserOptions: {
+              ecma: undefined,
+              parse: {},
+              compress: {},
+              mangle: true,
+              module: false,
+            },
+            extractComments: /^\**!|@preserve|@license|@cc_on/i,
+          }),
+        ],
  },
  module: {
    rules: [
-      {
-        test: /\.css$/,
-        use: ["vue-style-loader", MiniCssExtractPlugin.loader, "css-loader"],
-      },
-      {
-        test: /\.html/,
-        use: "html-loader",
-      },
      {
        test: /\.vue$/,
-        loader: "vue-loader",
+        use: "vue-loader",
+      },
+      {
+        test: /\.css$/,
+        use: [
+          inDevMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
+          "css-loader",
+        ],
+      },
+      {
+        test: /\.html$/,
+        use: "html-loader",
      },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader",
      },
      {
-        test: /\.(gif|png|jpe?g|svg)$/i,
-        use: [
-          {
-            loader: "file-loader",
-            options: {
-              name: "[contenthash].[ext]",
-              esModule: false,
-            },
-          },
-        ],
+        test: /\.(jpe?g|png|gif|svg)$/i,
+        type: "asset",
      },
      {
        test: /\.js$/,
@@ -322,13 +305,13 @@ module.exports = {
      {
        apply(compiler) {
          compiler.hooks.afterEmit.tapAsync(
-            "AfterEmitPlugin",
-            (_param, callback) => {
+            "AfterEmittedPlugin",
+            (_params, callback) => {
              killSpawnProc(appBuildProc, () => {
                startBuildSpawnProc(() => {
                  callback();

-                  if (process.env.NODE_ENV !== "development") {
+                  if (!inDevMode) {
                    return;
                  }

@@ -349,7 +332,7 @@ module.exports = {
        favicons: {
          appName: "Sshwifty SSH Client",
          appDescription: "Web SSH Client",
-          developerName: "Rui NI",
+          developerName: "Rui Ni",
          developerURL: "https://vaguly.com",
          background: "#333",
          theme_color: "#333",
@@ -382,7 +365,7 @@ module.exports = {
        title: "Sshwifty Web SSH Client",
        minify: {
          html5: true,
-          collapseWhitespace: process.env.NODE_ENV !== "development",
+          collapseWhitespace: !inDevMode,
          caseSensitive: true,
          removeComments: true,
          removeEmptyElements: false,
@@ -402,40 +385,47 @@ module.exports = {
        lang: "en-US",
        minify: {
          html5: true,
-          collapseWhitespace: process.env.NODE_ENV !== "development",
+          collapseWhitespace: !inDevMode,
          caseSensitive: true,
          removeComments: true,
          removeEmptyElements: false,
        },
      }),
-      new ImageminPlugin({
-        disable: process.env.NODE_ENV === "development",
-        pngquant: {
-          speed: 3,
-          strip: true,
-          quality: "0-3",
-        },
-      }),
      new MiniCssExtractPlugin({
-        filename:
-          process.env.NODE_ENV === "development" ? "[id].css" : "[hash].css",
-        chunkFilename:
-          process.env.NODE_ENV === "development"
-            ? "[id].css"
-            : "[chunkhash].css",
+        filename: inDevMode ? "[id].css" : "[contenthash].css",
+        chunkFilename: inDevMode ? "[id].css" : "[contenthash].css",
      }),
-      new OptimizeCssAssetsPlugin({
-        assetNameRegExp: /\.css$/,
-        cssProcessor: require("cssnano"),
-        cssProcessorPluginOptions: {
-          preset: ["default", { discardComments: { removeAll: true } }],
-        },
-        canPrint: true,
-      }),
-      new ManifestPlugin(),
    ];

-    if (process.env.NODE_ENV !== "development") {
+    if (!inDevMode) {
+      plugins.push(
+        new ImageMinimizerPlugin({
+          severityError: "warning",
+          deleteOriginalAssets: true,
+          maxConcurrency: os.cpus().length,
+          minimizerOptions: {
+            plugins: [
+              ["gifsicle", { interlaced: true }],
+              ["mozjpeg", { progressive: true }],
+              ["pngquant", { quality: [0.0, 0.03] }],
+              [
+                "svgo",
+                {
+                  multipass: true,
+                  datauri: "enc",
+                  indent: 0,
+                  plugins: [
+                    {
+                      sortAttrs: true,
+                      inlineStyle: true,
+                    },
+                  ],
+                },
+              ],
+            ],
+          },
+        })
+      );
      plugins.push(new CleanWebpackPlugin());
    }