From adc55e592fc347e970c7982680c2cd0915dad090 Mon Sep 17 00:00:00 2001 From: javaLuo <376693576@qq.com> Date: Sat, 8 Jan 2022 02:15:31 +0800 Subject: [PATCH] update --- package.json | 48 +++++++++++++++------------ server-back.js | 65 ++++++++++++++++++++++++++++++++++++ server.js | 90 ++++++++++++++++++++++++++------------------------ 3 files changed, 137 insertions(+), 66 deletions(-) create mode 100644 server-back.js diff --git a/package.json b/package.json index 055d30de..c6f59e0f 100644 --- a/package.json +++ b/package.json @@ -24,63 +24,67 @@ }, "dependencies": { "@rematch/core": "^2.2.0", - "antd": "^4.17.3", + "antd": "^4.18.2", "axios": "^0.24.0", - "core-js": "^3.19.3", - "eslint": "^7.32.0", + "core-js": "^3.20.2", + "eslint": "^8.6.0", + "koa": "^2.13.4", + "koa-convert": "^2.0.0", + "koa-json": "^2.0.2", + "koa-static-plus": "^0.1.1", "lodash": "^4.17.21", "react": "^17.0.2", "react-dom": "^17.0.2", "react-loadable": "^5.5.0", "react-redux": "^7.2.6", - "react-router-dom": "^6.1.1", + "react-router-dom": "^6.2.1", "redux": "^4.1.2" }, "devDependencies": { - "@babel/core": "^7.16.5", - "@babel/plugin-proposal-class-properties": "^7.16.5", - "@babel/plugin-proposal-decorators": "^7.16.5", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5", - "@babel/plugin-proposal-object-rest-spread": "^7.16.5", - "@babel/plugin-proposal-optional-chaining": "^7.16.5", + "@babel/core": "^7.16.7", + "@babel/plugin-proposal-class-properties": "^7.16.7", + "@babel/plugin-proposal-decorators": "^7.16.7", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7", + "@babel/plugin-proposal-object-rest-spread": "^7.16.7", + "@babel/plugin-proposal-optional-chaining": "^7.16.7", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-transform-runtime": "^7.16.5", - "@babel/preset-env": "^7.16.5", - "@babel/preset-react": "^7.16.5", - "@babel/runtime": "^7.16.5", + "@babel/plugin-transform-runtime": "^7.16.7", + "@babel/preset-env": "^7.16.7", + "@babel/preset-react": "^7.16.7", + "@babel/runtime": "^7.16.7", "antd-dayjs-webpack-plugin": "^1.0.6", - "autoprefixer": "^10.4.0", + "autoprefixer": "^10.4.2", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.3", "babel-plugin-import": "^1.13.3", "clean-webpack-plugin": "^4.0.0", - "copy-webpack-plugin": "^10.1.0", + "copy-webpack-plugin": "^10.2.0", "css-loader": "^6.5.1", - "css-minimizer-webpack-plugin": "^3.2.0", + "css-minimizer-webpack-plugin": "^3.3.1", "dayjs": "^1.10.7", "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.27.1", + "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", - "express": "^4.17.1", + "express": "^4.17.2", "favicons": "^6.2.2", "favicons-webpack-plugin": "^5.0.2", "happypack": "^5.0.1", "html-webpack-plugin": "^5.5.0", "less": "^4.1.2", "less-loader": "^10.2.0", - "mini-css-extract-plugin": "^2.4.5", + "mini-css-extract-plugin": "^2.4.6", "mockjs": "^1.1.0", "postcss": "^8.4.5", "postcss-loader": "^6.2.1", "prettier": "^2.5.1", "style-loader": "^3.3.1", "sw-precache-webpack-plugin": "^1.0.0", - "terser-webpack-plugin": "^5.2.5", + "terser-webpack-plugin": "^5.3.0", "webpack": "^5.65.0", "webpack-bundle-analyzer": "^4.5.0", "webpack-cli": "^4.9.1", - "webpack-dev-middleware": "^5.2.2", + "webpack-dev-middleware": "^5.3.0", "webpack-hot-middleware": "^2.25.1", "webpackbar": "^5.0.2", "workbox-webpack-plugin": "^6.4.2", diff --git a/server-back.js b/server-back.js new file mode 100644 index 00000000..84aa6508 --- /dev/null +++ b/server-back.js @@ -0,0 +1,65 @@ +/** 用于开发环境的服务启动 **/ +const path = require("path"); // 获取绝对路径有用 +const express = require("express"); // express服务器端框架 +const env = process.env.NODE_ENV; // 模式(dev开发环境,production生产环境) +const webpack = require("webpack"); // webpack核心 +const webpackDevMiddleware = require("webpack-dev-middleware"); // webpack服务器 +const webpackHotMiddleware = require("webpack-hot-middleware"); // HMR热更新中间件 +const webpackConfig = require("./webpack.dev.config.js"); // webpack开发环境的配置文件 + +const mock = require("./mock/mock-data"); // mock模拟数据,模拟后台业务 + +const app = express(); // 实例化express服务 +const DIST_DIR = webpackConfig.output.path; // webpack配置中设置的文件输出路径,所有文件存放在内存中 +let PORT = 8888; // 服务启动端口号 + +app.use(express.urlencoded({ extended: false })); +app.use(express.json()); + +/** 监听POST请求,返回MOCK模拟数据 **/ +app.post(/\/api.*/, (req, res, next) => { + const result = mock.mockApi({ url: req.originalUrl, body: req.body }); + res.send(result); +}); +app.get(/\/api.*/, (req, res, next) => { + const result = mock.mockApi({ url: req.originalUrl, body: req.body }); + res.send(result); +}); + +if (env === "production") { + // 如果是生产环境,则运行build文件夹中的代码 + PORT = 8889; + app.use(express.static("build")); + app.get("*", (req, res) => { + res.sendFile(path.join(__dirname, "build", "index.html")); + }); +} else { + const compiler = webpack(webpackConfig); // 实例化webpack + app.use(express.static("dll")); + app.use( + webpackDevMiddleware(compiler, { + publicPath: webpackConfig.output.publicPath, // 对应webpack配置中的publicPath + }), + ); + + app.use(webpackHotMiddleware(compiler)); // 挂载HMR热更新中间件 + // 所有请求都返回index.html + app.get("*", (req, res, next) => { + const filename = path.join(DIST_DIR, "index.html"); + + // 由于index.html是由html-webpack-plugin生成到内存中的,所以使用下面的方式获取 + compiler.outputFileSystem.readFile(filename, (err, result) => { + if (err) { + return next(err); + } + res.set("content-type", "text/html"); + res.send(result); + res.end(); + }); + }); +} + +/** 启动服务 **/ +app.listen(PORT, () => { + console.log("本地服务启动地址: http://localhost:%s", PORT); +}); diff --git a/server.js b/server.js index 84aa6508..7088b2dc 100644 --- a/server.js +++ b/server.js @@ -1,6 +1,15 @@ /** 用于开发环境的服务启动 **/ + +// import Bodyparser from "koa-bodyparser"; + +const http = require("http"); +const koaStatic = require("koa-static-plus"); +const convert = require("koa-convert"); +const json = require("koa-json"); +const Koa = require("Koa"); + const path = require("path"); // 获取绝对路径有用 -const express = require("express"); // express服务器端框架 +// const Koa = require("Koa"); // express服务器端框架 const env = process.env.NODE_ENV; // 模式(dev开发环境,production生产环境) const webpack = require("webpack"); // webpack核心 const webpackDevMiddleware = require("webpack-dev-middleware"); // webpack服务器 @@ -9,57 +18,50 @@ const webpackConfig = require("./webpack.dev.config.js"); // webpack开发环境 const mock = require("./mock/mock-data"); // mock模拟数据,模拟后台业务 -const app = express(); // 实例化express服务 +const app = new Koa(); // 实例化express服务 const DIST_DIR = webpackConfig.output.path; // webpack配置中设置的文件输出路径,所有文件存放在内存中 -let PORT = 8888; // 服务启动端口号 +let PORT = 8882; // 服务启动端口号 -app.use(express.urlencoded({ extended: false })); -app.use(express.json()); +// app.use(convert(bodyparser)); +app.use(convert(json())); -/** 监听POST请求,返回MOCK模拟数据 **/ -app.post(/\/api.*/, (req, res, next) => { - const result = mock.mockApi({ url: req.originalUrl, body: req.body }); - res.send(result); -}); -app.get(/\/api.*/, (req, res, next) => { - const result = mock.mockApi({ url: req.originalUrl, body: req.body }); - res.send(result); +// 路由 +// app.use(async (ctx, next) => { +// const url = ctx.path; +// const request = ctx.request; +// const query = request.query; +// console.log("请求:", url, query); +// if (ctx.url === "/") { +// } +// }); + +// response router +app.use(async (ctx, next) => { + console.log("收到一个请求:", ctx); + // await require("./routes").routes()(ctx, next); }); -if (env === "production") { - // 如果是生产环境,则运行build文件夹中的代码 - PORT = 8889; - app.use(express.static("build")); - app.get("*", (req, res) => { - res.sendFile(path.join(__dirname, "build", "index.html")); - }); -} else { - const compiler = webpack(webpackConfig); // 实例化webpack - app.use(express.static("dll")); - app.use( - webpackDevMiddleware(compiler, { - publicPath: webpackConfig.output.publicPath, // 对应webpack配置中的publicPath - }), - ); +// static +// app.use( +// convert( +// koaStatic(path.join(__dirname, "./build"), { +// pathPrefix: "", +// }), +// ), +// ); + +// app.use(convert(koaStatic(path.join(__dirname, "dll")))); - app.use(webpackHotMiddleware(compiler)); // 挂载HMR热更新中间件 - // 所有请求都返回index.html - app.get("*", (req, res, next) => { - const filename = path.join(DIST_DIR, "index.html"); +// const compiler = webpack(webpackConfig); // 实例化webpack +// app.use( +// webpackDevMiddleware(compiler, { +// publicPath: webpackConfig.output.publicPath, // 对应webpack配置中的publicPath +// }), +// ); - // 由于index.html是由html-webpack-plugin生成到内存中的,所以使用下面的方式获取 - compiler.outputFileSystem.readFile(filename, (err, result) => { - if (err) { - return next(err); - } - res.set("content-type", "text/html"); - res.send(result); - res.end(); - }); - }); -} +// app.use(webpackHotMiddleware(compiler)); // 挂载HMR热更新中间件 /** 启动服务 **/ app.listen(PORT, () => { - console.log("本地服务启动地址: http://localhost:%s", PORT); + console.log("本地服务启动地址1: http://localhost:%s", PORT); });