From 009d49e5b5cf7f7568e4b17961aa11b36d589a90 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Jun 2021 15:00:26 +0800
Subject: build: Good bye babel!

---
 FrontEnd/package.json                  | 14 ++------------
 FrontEnd/src/app/App.tsx               |  6 +++---
 FrontEnd/src/app/views/about/index.tsx |  4 ----
 FrontEnd/src/tsconfig.json             |  8 +++-----
 FrontEnd/webpack.common.js             | 16 ++--------------
 FrontEnd/webpack.config.dev.js         | 22 +++++++---------------
 6 files changed, 17 insertions(+), 53 deletions(-)

diff --git a/FrontEnd/package.json b/FrontEnd/package.json
index e3bcb58e..c24be5ed 100644
--- a/FrontEnd/package.json
+++ b/FrontEnd/package.json
@@ -58,15 +58,6 @@
     ]
   },
   "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-proposal-class-properties": "^7.12.13",
-    "@babel/plugin-proposal-decorators": "^7.14.2",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
-    "@babel/plugin-proposal-optional-chaining": "^7.14.2",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-beta.9",
     "@types/color": "^3.0.1",
     "@types/lodash": "^4.14.170",
@@ -83,8 +74,6 @@
     "@types/xregexp": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-transform-builtin-extend": "^1.1.2",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.2.6",
@@ -101,6 +90,7 @@
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.3.0",
     "react-refresh": "^0.10.0",
+    "react-refresh-typescript": "^2.0.1",
     "sass": "^1.34.0",
     "sass-loader": "^12.0.0",
     "style-loader": "^2.0.0",
@@ -110,7 +100,7 @@
     "webpack": "^5.38.1",
     "webpack-chain": "^6.5.1",
     "webpack-cli": "^4.7.0",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.0.0-beta.3",
     "workbox-webpack-plugin": "^6.1.5"
   }
 }
diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx
index 6431ebbb..a28b99ae 100644
--- a/FrontEnd/src/app/App.tsx
+++ b/FrontEnd/src/app/App.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 import AppBar from "./views/common/AppBar";
@@ -23,7 +23,7 @@ const LazyAdmin = React.lazy(
   () => import(/* webpackChunkName: "admin" */ "./views/admin/Admin")
 );
 
-const App: React.FC = () => {
+function App(): ReactElement | null {
   const user = useRawUser();
 
   React.useEffect(() => {
@@ -82,6 +82,6 @@ const App: React.FC = () => {
       </React.Suspense>
     );
   }
-};
+}
 
 export default App;
diff --git a/FrontEnd/src/app/views/about/index.tsx b/FrontEnd/src/app/views/about/index.tsx
index d63b6996..a50164a9 100644
--- a/FrontEnd/src/app/views/about/index.tsx
+++ b/FrontEnd/src/app/views/about/index.tsx
@@ -24,10 +24,6 @@ const frontendCredits: {
     name: "react-bootstrap",
     url: "https://react-bootstrap.github.io",
   },
-  {
-    name: "babeljs",
-    url: "https://babeljs.io",
-  },
   {
     name: "webpack",
     url: "https://webpack.js.org",
diff --git a/FrontEnd/src/tsconfig.json b/FrontEnd/src/tsconfig.json
index 1855f5cd..21989043 100644
--- a/FrontEnd/src/tsconfig.json
+++ b/FrontEnd/src/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "ES6",
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -11,13 +11,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react",
     "sourceMap": true,
     "baseUrl": "./",
     "paths": {
-      "@/*": [
-        "app/*"
-      ]
+      "@/*": ["app/*"]
     }
   }
 }
diff --git a/FrontEnd/webpack.common.js b/FrontEnd/webpack.common.js
index e957a399..94cdf694 100644
--- a/FrontEnd/webpack.common.js
+++ b/FrontEnd/webpack.common.js
@@ -7,26 +7,14 @@ const config = new Config();
 config.entry("index").add(path.resolve(__dirname, "src/app/index.tsx"));
 
 config.module
-  .rule("ts")
-  .test(/\.ts(x?)$/)
+  .rule("jsts")
+  .test(/\.[jt]sx?$/)
   .exclude.add(/node_modules/)
   .end()
-  .use("babel")
-  .loader("babel-loader")
-  .end()
   .use("ts")
   .loader("ts-loader")
   .end();
 
-config.module
-  .rule("js")
-  .test(/\.js(x?)$/)
-  .exclude.add(/node_modules/)
-  .end()
-  .use("babel")
-  .loader("babel-loader")
-  .end();
-
 config.module
   .rule("css")
   .test(/\.css$/)
diff --git a/FrontEnd/webpack.config.dev.js b/FrontEnd/webpack.config.dev.js
index a657861b..4c6031c7 100644
--- a/FrontEnd/webpack.config.dev.js
+++ b/FrontEnd/webpack.config.dev.js
@@ -1,22 +1,18 @@
 const path = require("path");
 const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
+const ReactRefreshTypeScript = require("react-refresh-typescript");
 
 const config = require("./webpack.common");
 
 config.mode("development");
 
 config.module
-  .rule("ts")
-  .use("babel")
+  .rule("jsts")
+  .use("ts")
   .options({
-    plugins: ["react-refresh/babel"],
-  });
-
-config.module
-  .rule("js")
-  .use("babel")
-  .options({
-    plugins: ["react-refresh/babel"],
+    getCustomTransformers: () => ({
+      before: [ReactRefreshTypeScript()],
+    }),
   });
 
 config.module
@@ -35,11 +31,7 @@ config.module
 
 config.devtool("eval-cheap-module-source-map");
 
-config.devServer
-  .contentBase(path.resolve(__dirname, "public/"))
-  .port(3000)
-  .historyApiFallback(true)
-  .hot(true);
+config.devServer.port(3000).historyApiFallback(true).hot(true);
 
 config.plugin("react-refresh").use(new ReactRefreshWebpackPlugin());
 
-- 
cgit v1.2.3