fix: 优化依赖/使用swc

.vscode/settings.json

@@ -11,6 +11,7 @@
 
   // 保存时进行一些操作
   "editor.codeActionsOnSave": {
+    // "source.fixAll.eslint": false, // 运行eslint
     "source.fixAll.eslint": true, // 运行eslint
     "source.organizeImports": true // 整理import语句(包括import的成员),以及会删掉未使用的导入,注意:会删掉declare global {import utils from 'billd-utils';}的import utils from 'billd-utils';
     // "source.sortImports": true // 对您的导入进行排序,然而,与organizeImports不同,它不会删除任何未使用的导入,也不会对import里面的成员进行排序

package.json

@@ -48,8 +48,6 @@
     "pinia-plugin-persistedstate": "^3.2.0",
     "qrcode": "^1.5.3",
     "socket.io-client": "^4.6.1",
-    "unplugin-vue-components": "^0.24.1",
-    "vconsole": "^3.15.0",
     "video.js": "^8.3.0",
     "vue": "^3.3.4",
     "vue-demi": "^0.13.11",
@@ -64,10 +62,11 @@
     "@commitlint/config-conventional": "^16.0.0",
     "@rushstack/eslint-patch": "^1.1.0",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
+    "@swc/core": "^1.3.84",
     "@types/fabric": "^5.3.3",
     "@types/node": "^18.11.9",
     "@types/video.js": "^7.3.52",
-    "@vue/compiler-sfc": "^3.2.31",
+    "@vue/compiler-sfc": "^3.3.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",
     "@vue/preload-webpack-plugin": "^2.0.0",
@@ -82,7 +81,7 @@
     "css-minimizer-webpack-plugin": "^3.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "cz-customizable": "^7.0.0",
-    "esbuild-loader": "^3.1.0",
+    "esbuild-loader": "^4.0.2",
     "eslint": "^8.13.0",
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.28.0",
@@ -103,13 +102,16 @@
     "sass": "^1.45.2",
     "sass-loader": "^12.4.0",
     "standard-version": "^9.3.2",
+    "swc-loader": "^0.2.3",
     "terser": "^5.7.0",
     "terser-webpack-plugin": "^5.3.6",
     "thread-loader": "^3.0.4",
     "ts-loader": "^9.2.7",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
-    "vue-loader": "^17.0.0",
+    "unplugin-vue-components": "^0.24.1",
+    "vconsole": "^3.15.0",
+    "vue-loader": "^17.2.2",
     "vue-style-loader": "^4.1.3",
     "webpack": "^5.68.0",
     "webpack-bundle-analyzer": "^4.4.1",

script/config/webpack.common.ts

@@ -10,6 +10,7 @@ import { VueLoaderPlugin } from 'vue-loader';
 import { Configuration, DefinePlugin } from 'webpack';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { merge } from 'webpack-merge';
+import WebpackBar from 'webpackbar';
 import WindiCSSWebpackPlugin from 'windicss-webpack-plugin';
 
 import {
@@ -18,6 +19,7 @@ import {
   htmlWebpackPluginTitle,
   outputDir,
   outputStaticUrl,
+  webpackBarEnable,
   windicssEnable,
 } from '../constant';
 import { chalkINFO, chalkWARN } from '../utils/chalkTip';
@@ -148,6 +150,7 @@ const commonConfig = (isProduction) => {
     },
     cache: {
       type: 'memory',
+      // type: 'filesystem',
       // allowCollectingMemory: true, // 它在生产模式中默认为false，并且在开发模式下默认为true。https://webpack.js.org/configuration/cache/#cacheallowcollectingmemory
       // buildDependencies: {
       //   // 建议cache.buildDependencies.config: [__filename]在您的 webpack 配置中设置以获取最新配置和所有依赖项。
@@ -267,6 +270,8 @@ const commonConfig = (isProduction) => {
       ],
     },
     plugins: [
+      // 构建进度条
+      webpackBarEnable && new WebpackBar(),
       // 友好的显示错误信息在终端
       new FriendlyErrorsWebpackPlugin(),
       // 解析vue
@@ -321,6 +326,34 @@ const commonConfig = (isProduction) => {
           },
         ],
       }),
+      // new EsbuildPlugin({
+      //   target: 'esnext',
+      //   // define: {
+      //   //   DSF_FS: JSON.stringify({ d: 23 }),
+      //   //   'process.env.NODE_ENV': JSON.stringify({ d: 32 }),
+      //   //   'process.env.PUBLIC_PATdH': JSON.stringify({ f: 2 }),
+      //   //   // 'process.env.VUE_APP_RELEASE_PROJECT_NAME': JSON.stringify(
+      //   //   //   process.env.VUE_APP_RELEASE_PROJECT_NAME
+      //   //   // ),
+      //   //   // 'process.env.VUE_APP_RELEASE_PROJECT_ENV': JSON.stringify(
+      //   //   //   process.env.VUE_APP_RELEASE_PROJECT_ENV
+      //   //   // ),
+      //   //   // 'process.env.BilldHtmlWebpackPlugin': JSON.stringify(logData()),
+      //   //   // 'process.env': {
+      //   //   //   BilldHtmlWebpackPlugin: JSON.stringify(logData()),
+      //   //   //   NODE_ENV: JSON.stringify(
+      //   //   //     isProduction ? 'production' : 'development'
+      //   //   //   ),
+      //   //   //   PUBLIC_PATH: JSON.stringify(outputStaticUrl(isProduction)),
+      //   //   //   VUE_APP_RELEASE_PROJECT_NAME: JSON.stringify(
+      //   //   //     process.env.VUE_APP_RELEASE_PROJECT_NAME
+      //   //   //   ),
+      //   //   //   VUE_APP_RELEASE_PROJECT_ENV: JSON.stringify(
+      //   //   //     process.env.VUE_APP_RELEASE_PROJECT_ENV
+      //   //   //   ),
+      //   //   // },
+      //   // },
+      // }),
       // 定义全局变量
       new DefinePlugin({
         BASE_URL: `${JSON.stringify(outputStaticUrl(isProduction))}`, // public下的index.html里面的favicon.ico的路径
@@ -338,6 +371,38 @@ const commonConfig = (isProduction) => {
         __VUE_OPTIONS_API__: false,
         __VUE_PROD_DEVTOOLS__: false,
       }),
+      // ts类型检查
+      // feat: drop support for Vue.js：https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/pull/801
+      // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/v6.5.2#vuejs
+      // fork-ts-checker-webpack-plugin得配合ts-loader使用。
+      // new ForkTsCheckerWebpackPlugin({
+      //   // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin
+      //   typescript: {
+      //     extensions: {
+      //       vue: {
+      //         enabled: true,
+      //         compiler: resolveApp('./node_modules/vue/compiler-sfc/index.js'),
+      //       },
+      //     },
+      //     diagnosticOptions: {
+      //       semantic: true,
+      //       syntactic: false,
+      //     },
+      //   },
+      //   /**
+      //    * devServer如果设置为false，则不会向 Webpack Dev Server 报告错误。
+      //    * 但是控制台还是会打印错误。
+      //    */
+      //   // devServer: false, // 7.x版本：https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/723
+      //   logger: {
+      //     devServer: false, // fork-ts-checker-webpack-plugin6.x版本
+      //   },
+      //   /**
+      //    * async 为 false，同步的将错误信息反馈给 webpack，如果报错了，webpack 就会编译失败
+      //    * async 默认为 true，异步的将错误信息反馈给 webpack，如果报错了，不影响 webpack 的编译
+      //    */
+      //   async: true,
+      // }),
       // bundle分析
       analyzerEnable &&
         new BundleAnalyzerPlugin({

script/config/webpack.dev.ts

@@ -1,9 +1,7 @@
-import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import portfinder from 'portfinder';
 import { Configuration } from 'webpack';
-import WebpackBar from 'webpackbar';
 
-import { outputStaticUrl, webpackBarEnable } from '../constant';
+import { outputStaticUrl } from '../constant';
 import TerminalPrintPlugin from '../TerminalPrintPlugin';
 import { chalkINFO } from '../utils/chalkTip';
 import { resolveApp } from '../utils/path';
@@ -25,8 +23,8 @@ export default new Promise((resolve) => {
         mode: 'development',
         stats: 'none',
         // https://webpack.docschina.org/configuration/devtool/
-        devtool: 'eval-cheap-module-source-map',
-        // devtool: 'eval', // eval，具有最高性能的开发构建的推荐选择。
+        // devtool: 'eval-cheap-module-source-map',
+        devtool: 'eval', // eval，具有最高性能的开发构建的推荐选择。
         // 这个infrastructureLogging设置参考了vuecli5，如果不设置，webpack-dev-server会打印一些信息
         infrastructureLogging: {
           level: 'none',
@@ -92,57 +90,58 @@ export default new Promise((resolve) => {
         module: {
           rules: [
             {
-              test: /\.(js|mjs|jsx|ts|tsx)$/,
+              test: /.(ts|tsx)$/,
               exclude: /node_modules/,
               use: [
                 {
-                  loader: 'esbuild-loader',
+                  loader: 'swc-loader',
                   options: {
-                    loader: 'tsx', // Remove this if you're not using JSX
-                    target: 'esnext', // Syntax to compile to (see options below for possible values)
+                    jsc: {
+                      parser: {
+                        syntax: 'typescript',
+                        tsx: true,
+                      },
+                    },
                   },
                 },
               ],
             },
+            {
+              test: /.(js|jsx|mjs|cjs)$/,
+              exclude: /node_modules/,
+              use: [
+                {
+                  loader: 'swc-loader',
+                  options: {
+                    jsc: {
+                      parser: {
+                        syntax: 'ecmascript',
+                        jsx: true,
+                      },
+                    },
+                  },
+                },
+              ],
+            },
+            // {
+            //   test: /\.(js|mjs|jsx|ts|tsx)$/,
+            //   exclude: /node_modules/,
+            //   use: [
+            //     {
+            //       loader: 'esbuild-loader',
+            //       options: {
+            //         loader: 'tsx', // Remove this if you're not using JSX
+            //         target: 'esnext', // Syntax to compile to (see options below for possible values)
+            //       },
+            //     },
+            //   ],
+            // },
           ],
         },
         // @ts-ignore
         plugins: [
-          // new VueLoaderPlugin(),
-          // 构建进度条
-          webpackBarEnable && new WebpackBar(),
           // 终端打印调试地址
           new TerminalPrintPlugin(),
-          new ForkTsCheckerWebpackPlugin({
-            // https://github.com/TypeStrong/fork-ts-checker-webpack-plugin
-            typescript: {
-              extensions: {
-                vue: {
-                  enabled: true,
-                  compiler: resolveApp(
-                    './node_modules/vue/compiler-sfc/index.js'
-                  ),
-                },
-              },
-              diagnosticOptions: {
-                semantic: true,
-                syntactic: false,
-              },
-            },
-            /**
-             * devServer如果设置为false，则不会向 Webpack Dev Server 报告错误。
-             * 但是控制台还是会打印错误。
-             */
-            devServer: false, // 7.x版本：https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/issues/723
-            // logger: {
-            //   devServer: false, // fork-ts-checker-webpack-plugin6.x版本
-            // },
-            /**
-             * async 为 false，同步的将错误信息反馈给 webpack，如果报错了，webpack 就会编译失败
-             * async 默认为 true，异步的将错误信息反馈给 webpack，如果报错了，不影响 webpack 的编译
-             */
-            async: true,
-          }),
         ].filter(Boolean),
         optimization: {
           /**

script/config/webpack.prod.ts

@@ -10,7 +10,6 @@ import TerserPlugin from 'terser-webpack-plugin';
 // import { version as vueRouterVersion } from 'vue-router/package.json';
 // import { version as vueVersion } from 'vue/package.json';
 import { Configuration } from 'webpack';
-import WebpackBar from 'webpackbar';
 
 import { gzipEnable } from '../constant';
 import { chalkINFO } from '../utils/chalkTip';
@@ -176,8 +175,6 @@ const prodConfig: Configuration = {
     ],
   },
   plugins: [
-    // 构建进度条
-    new WebpackBar(),
     // http压缩
     gzipEnable &&
       new CompressionPlugin({

src/main.ts

@@ -1,8 +1,9 @@
+// 一定要引入webrtc-adapter（约等于垫片，适配safari等其他浏览器）
+import 'webrtc-adapter';
 import './main.scss';
 import './showBilldVersion';
 // import 'windi.css'; // windicss-webpack-plugin会解析windi.css这个MODULE_ID
 import { createApp } from 'vue';
-import adapter from 'webrtc-adapter';
 
 import Message from '@/components/Message/index.vue';
 import registerDirectives from '@/directives';
@@ -11,8 +12,6 @@ import store from '@/store/index';
 
 import App from './App.vue';
 
-console.log('webrtc-adapter', adapter.browserDetails);
-
 const app = createApp(App);
 registerDirectives(app);
 app.use(store);