feat(wip): 前端, 以及編譯前端

TODO: 修復 webpack (in mian.ts)

server/api/ApiManager.ts

@@ -1,6 +1,6 @@
 import HttpServerLike from '../types/HttpServerLike.ts'
 import UserApi from "./UserApi.ts"
-import SocketIo from "socket.io"
+import * as SocketIo from "socket.io"
 import ApiCallbackMessage from "../types/ApiCallbackMessage.ts"
 import EventCallbackFunction from "../types/EventCallbackFunction.ts"
 

server/main.ts

@@ -1,10 +1,11 @@
 import ApiManager from "./api/ApiManager.ts"
 import express from 'express'
-import SocketIo from 'socket.io'
+import * as SocketIo from 'socket.io'
 import HttpServerLike from "./types/HttpServerLike.ts"
 import config from './config.ts'
 import http from 'node:http'
 import https from 'node:https'
+import web_packer from './web_packer.ts'
 
 const app = express()
 const httpServer: HttpServerLike = (
@@ -21,3 +22,9 @@ ApiManager.initEvents()
 ApiManager.initAllApis()
 
 httpServer.listen(config.server.listen)
+
+web_packer?.run((err, status) => {
+    if (err) throw err
+    console.log("前端頁面已編譯完成")
+    web_packer?.close(() => {})
+})

server/web_packer.ts

@@ -0,0 +1,29 @@
+import webpack from 'webpack'
+import config from "./config.ts"
+import path from 'node:path'
+
+export default webpack({
+    mode: 'production',
+    devtool: 'source-map',
+    entry: './client/ui/App.jsx',
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(import.meta.dirname as string, config.data_path, 'page_compiled'),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(j|t)sx?$/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            '@babel/preset-env',
+                            '@babel/preset-react',
+                        ],
+                    },
+                },
+            },
+        ],
+    },
+})