添加web初始化代码。

This commit is contained in:
amass 2025-03-17 18:48:01 +08:00
parent 854140e323
commit 70763da9b0
6 changed files with 84 additions and 0 deletions

2
.gitignore vendored
View File

@ -40,3 +40,5 @@ target_wrapper.*
CMakeLists.txt.user*
.idea
build
Frontend/node_modules
Frontend/package-lock.json

6
Frontend/index.jsx Normal file
View File

@ -0,0 +1,6 @@
import React from "react";
import { createRoot } from 'react-dom/client';
import App from "./src/App.jsx"
const root = createRoot(document.getElementById('root'));
root.render(<App />);

27
Frontend/package.json Normal file
View File

@ -0,0 +1,27 @@
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server .",
"build": "webpack .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "amass",
"license": "ISC",
"description": "",
"dependencies": {
"@babel/cli": "^7.26.4",
"@babel/core": "^7.26.10",
"@babel/plugin-transform-runtime": "^7.26.10",
"@babel/preset-env": "^7.26.9",
"@babel/preset-react": "^7.26.3",
"@babel/runtime": "^7.26.10",
"babel-loader": "^10.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"webpack": "^5.98.0",
"webpack-cli": "^6.0.1",
"webpack-dev-server": "^5.2.0"
}
}

View File

@ -0,0 +1,4 @@
<body>
<div id="root"></div>
</body>
<script src="/main.js"></script>

9
Frontend/src/App.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from "react";
export default function App() {
return (
<h1>
Webpack Babel 开始搭建 React 项目
</h1>
)
}

View File

@ -0,0 +1,36 @@
const path = require("path");
module.exports = {
mode: "development", // or "production",
entry: "./index.jsx",
output: {
path: path.resolve(__dirname, "public"),
filename: "main.js"
},
target: "web",
devServer: {
static: {
directory: path.join(__dirname, 'public'),
},
host: "127.0.0.1",
port: "9000",
open: true,
hot: true,
liveReload: true
},
resolve: {
extensions: ['.js', '.jsx', '.json']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ["@babel/preset-react"]
}
}
]
}
}