内容...
+
- this.handleCancel()}
- onCancel={() => this.handleCancel()}
- >
+ this.handleCancel()} onCancel={() => this.handleCancel()}>
@@ -304,17 +265,17 @@ class TestPageContainer extends React.Component {
}
}
-const FormComponent = Form.create()(TestPageContainer);
+const FormComponent = Form.create()(TestClassPageContainer);
export default connect(
state => ({
userinfo: state.app.userinfo, // 引入app model中的userinfo数据
- count: state.test.count // 引入test model中的count数据
+ count: state.test.count, // 引入test model中的count数据
}),
model => ({
actions: {
getUserinfo: model.app.getUserinfo, // 引入app model中的获取用户信息action
onTestAdd: model.test.onTestAdd, // 引入test model中的数字+1 action
- serverFetch: model.test.serverFetch // 引入test model中的fetch异步请求action
- }
- })
+ serverFetch: model.test.serverFetch, // 引入test model中的fetch异步请求action
+ },
+ }),
)(FormComponent);
diff --git a/src/container/testclass/index.less b/src/container/testclass/index.less
index c17db627..1abb7753 100644
--- a/src/container/testclass/index.less
+++ b/src/container/testclass/index.less
@@ -1,4 +1,4 @@
-.page-test {
+.page-test-class {
width: 100%;
max-width: 1200px;
margin: 0 auto;
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index d4cfef66..f87a3517 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -3,6 +3,7 @@
const path = require("path"); // 获取绝对路径用
const webpack = require("webpack"); // webpack核心
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 动态生成html插件
+const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const HappyPack = require("happypack"); // 多线程编译
const webpackbar = require("webpackbar");
const PUBLIC_PATH = "/"; // 基础路径
@@ -92,6 +93,7 @@ module.exports = {
plugins: [
new webpackbar(),
new webpack.HotModuleReplacementPlugin(), // 热更新插件
+ new AntdDayjsWebpackPlugin(), // dayjs 替代 momentjs
new webpack.DefinePlugin({
"process.env": JSON.stringify({
PUBLIC_URL: PUBLIC_PATH,
diff --git a/webpack.production.config.js b/webpack.production.config.js
index e4449381..347d9a81 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -4,6 +4,7 @@ const path = require("path");
const webpack = require("webpack"); // webpack核心
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 为了单独打包css
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html
+const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前清除旧的build文件夹
const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin"); // 生成一个server-worker用于缓存
const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); // 自动生成各尺寸的favicon图标
@@ -28,7 +29,7 @@ module.exports = {
chunkFilename: "dist/[name].[chunkhash:8].chunk.js",
},
stats: {
- warningsFilter: warning => /Conflicting order between/gm.test(warning), // 不输出一些警告，多为因CSS引入顺序不同导致的警告
+ warningsFilter: warning => /Conflicting order/gm.test(warning), // 不输出一些警告，多为因CSS引入顺序不同导致的警告
children: false, // 不输出子模块的打包信息
},
optimization: {
@@ -115,6 +116,7 @@ module.exports = {
* **/
new CleanWebpackPlugin(),
new webpackbar(),
+ new AntdDayjsWebpackPlugin(), // dayjs 替代 momentjs
/**
* 在window环境中注入全局变量
* 这里这么做是因为src/registerServiceWorker.js中有用到，为了配置PWA
From cd7ebded3daca625ebefb006da1794f4826b20ce Mon Sep 17 00:00:00 2001
From: Logic <376693576@qq.com>
Date: Mon, 30 Dec 2019 17:48:59 +0800
Subject: [PATCH 10/98] favicons update
---
package.json | 2 +-
webpack.production.config.js | 4 ++--
2 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/package.json b/package.json
index 4d31f266..de385956 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,7 @@
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^2.3.0",
"express": "^4.17.1",
- "favicons-webpack-plugin": "^1.0.2",
+ "favicons-webpack-plugin": "2.0.0",
"file-loader": "^5.0.2",
"happypack": "^5.0.1",
"html-webpack-plugin": "^3.2.0",
diff --git a/webpack.production.config.js b/webpack.production.config.js
index 347d9a81..046e0432 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -185,8 +185,8 @@ module.exports = {
icons: {
// 生成哪些平台需要的图标
android: true, // 安卓
- appleIcon: true, // 苹果
- appleStartup: true, // 苹果启动页
+ appleIcon: false, // 苹果
+ appleStartup: false, // 苹果启动页
coast: false, // opera
favicons: true, // web小图标
firefox: false, // 火狐
From b5e4ddc56f30087ae0635e40b08c8d2994bdc974 Mon Sep 17 00:00:00 2001
From: Logic <376693576@qq.com>
Date: Sat, 18 Jan 2020 12:31:34 +0800
Subject: [PATCH 11/98] update package.json
---
package.json | 42 +++++++++---------
src/container/routers/index.js | 34 ++++++++++-----
src/container/test/index.js | 45 +++++++++++++------
src/container/testclass/index.js | 75 +++++++++++++++++++++++---------
4 files changed, 131 insertions(+), 65 deletions(-)
diff --git a/package.json b/package.json
index de385956..36a9f9b5 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,10 @@
},
"dependencies": {
"@rematch/core": "^1.3.0",
- "antd": "3.26.4",
- "antd-dayjs-webpack-plugin": "^0.0.7",
- "axios": "^0.19.0",
- "core-js": "^3.6.1",
+ "antd": "3.26.7",
+ "antd-dayjs-webpack-plugin": "^0.0.8",
+ "axios": "^0.19.1",
+ "core-js": "^3.6.4",
"history": "^4.10.1",
"lodash": "^4.17.15",
"react": "^16.12.0",
@@ -38,28 +38,28 @@
"redux": "^4.0.5"
},
"devDependencies": {
- "@babel/core": "^7.7.7",
- "@babel/plugin-proposal-class-properties": "^7.7.4",
- "@babel/plugin-proposal-decorators": "^7.7.4",
- "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
- "@babel/plugin-proposal-object-rest-spread": "^7.7.7",
- "@babel/plugin-proposal-optional-chaining": "^7.7.5",
- "@babel/plugin-syntax-dynamic-import": "^7.7.4",
- "@babel/plugin-transform-runtime": "^7.7.6",
- "@babel/preset-env": "^7.7.7",
- "@babel/preset-react": "^7.7.4",
- "@babel/runtime": "^7.7.7",
- "autoprefixer": "^9.7.3",
+ "@babel/core": "^7.8.3",
+ "@babel/plugin-proposal-class-properties": "^7.8.3",
+ "@babel/plugin-proposal-decorators": "^7.8.3",
+ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
+ "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+ "@babel/plugin-proposal-optional-chaining": "^7.8.3",
+ "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+ "@babel/plugin-transform-runtime": "^7.8.3",
+ "@babel/preset-env": "^7.8.3",
+ "@babel/preset-react": "^7.8.3",
+ "@babel/runtime": "^7.8.3",
+ "autoprefixer": "^9.7.4",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-plugin-import": "^1.13.0",
"body-parser": "^1.19.0",
"clean-webpack-plugin": "^3.0.0",
- "css-loader": "^3.4.0",
+ "css-loader": "^3.4.2",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.3",
"eslint-plugin-prettier": "^3.1.2",
- "eslint-plugin-react": "^7.17.0",
+ "eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^2.3.0",
"express": "^4.17.1",
"favicons-webpack-plugin": "2.0.0",
@@ -73,11 +73,11 @@
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"prettier": "1.19.1",
- "style-loader": "1.0.1",
+ "style-loader": "1.1.3",
"sw-precache-webpack-plugin": "^0.11.5",
- "terser-webpack-plugin": "^2.3.1",
+ "terser-webpack-plugin": "^2.3.2",
"url-loader": "^3.0.0",
- "webpack": "^4.41.4",
+ "webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0",
diff --git a/src/container/routers/index.js b/src/container/routers/index.js
index 3632faf6..af42916e 100644
--- a/src/container/routers/index.js
+++ b/src/container/routers/index.js
@@ -24,23 +24,23 @@ import "./index.less";
const Home = Loadable({
loader: () => import(/* webpackChunkName:'home' */ "../home"),
loading: Loading, // 自定义的Loading动画组件
- timeout: 10000, // 可以设置一个超时时间(s)来应对网络慢的情况（在Loading动画组件中可以配置error信息）
+ timeout: 10000 // 可以设置一个超时时间(s)来应对网络慢的情况（在Loading动画组件中可以配置error信息）
});
const Test = Loadable({
loader: () => import(/* webpackChunkName:'test' */ "../test"),
- loading: Loading,
+ loading: Loading
});
const TestClass = Loadable({
loader: () => import(/* webpackChunkName:'testclass' */ "../testclass"),
- loading: Loading,
+ loading: Loading
});
const Features = Loadable({
loader: () => import(/* webpackChunkName:'features' */ "../features"),
- loading: Loading,
+ loading: Loading
});
const NotFound = Loadable({
loader: () => import(/* webpackChunkName:'notfound' */ "../notfound"),
- loading: Loading,
+ loading: Loading
});
const history = createHistory(); // 实例化history对象
@@ -77,10 +77,22 @@ function RootRouterContainer(props) {
onEnter(Home, props)} />
- onEnter(Features, props)} />
- onEnter(Test, props)} />
- onEnter(TestClass, props)} />
+ onEnter(Home, props)}
+ />
+ onEnter(Features, props)}
+ />
+ onEnter(Test, props)}
+ />
+ onEnter(TestClass, props)}
+ />
@@ -98,6 +110,6 @@ function RootRouterContainer(props) {
export default connect(
state => ({}),
dispatch => ({
- actions: {},
- }),
+ actions: {}
+ })
)(RootRouterContainer);
diff --git a/src/container/test/index.js b/src/container/test/index.js
index 59107cf9..c97f3f98 100644
--- a/src/container/test/index.js
+++ b/src/container/test/index.js
@@ -22,7 +22,7 @@ function TestPageContainer({
match, // 自动注入的match对象
history, // 自动注入的history对象
actions, // 上面model中定义的actions对象，自动成为this.props.actions变量
- form, // antd的form表单高阶组件自动注入的form对象
+ form // antd的form表单高阶组件自动注入的form对象
}) {
const [visible, setVisible] = useState(false); // 模态框隐藏和显示
const [mokeFetch, setMokeFetch] = useState([]); // 用于测试fetch请求
@@ -93,11 +93,17 @@ function TestPageContainer({
上方图片，一张是img,一张是background
- 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， + + 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， +
- 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 + + 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 +
- 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" + + 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" +
- 功能测试
@@ -173,17 +164,11 @@ class TestPageContainer extends React.Component {
上方图片，一张是img,一张是background
- - 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， - + 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"，
- - 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 - + 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题
- - 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" - + 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/"
- - 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， - + 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"，
- - 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 - + 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题
- - 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" - + 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/"
@@ -234,10 +219,7 @@ class TestPageContainer extends React.Component {
action测试
-
内容...
- 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， + + 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， +
- 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 + + 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 +
- 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" + + 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" +
@@ -133,13 +139,21 @@ function TestPageContainer({
内容...
- 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， + + 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， +
- 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 + + 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 +
- 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" + + 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" +
@@ -219,7 +230,10 @@ class TestClassPageContainer extends React.Component {
- action测试
-
内容...
功能测试
@@ -136,24 +128,24 @@ function TestPageContainer({Antd表单
-
@@ -229,13 +211,13 @@ function TestPageContainer({
export default connect(
state => ({
userinfo: state.app.userinfo, // 引入app model中的userinfo数据
- count: state.test.count // 引入test model中的count数据
+ count: state.test.count, // 引入test model中的count数据
}),
dispatch => ({
actions: {
getUserinfo: dispatch.app.getUserinfo, // 引入app model中的获取用户信息action
onTestAdd: dispatch.test.onTestAdd, // 引入test model中的数字+1 action
- serverFetch: dispatch.test.serverFetch // 引入test model中的fetch异步请求action
- }
- })
+ serverFetch: dispatch.test.serverFetch, // 引入test model中的fetch异步请求action
+ },
+ }),
)(TestPageContainer);
From 8c4900c960796559030bf84f5521af2901d92c95 Mon Sep 17 00:00:00 2001
From: Logic <376693576@qq.com>
Date: Tue, 3 Mar 2020 17:37:00 +0800
Subject: [PATCH 17/98] Update README.md
---
README.md | 3 ---
1 file changed, 3 deletions(-)
diff --git a/README.md b/README.md
index dc4c2b0d..8015bfed 100644
--- a/README.md
+++ b/README.md
@@ -13,9 +13,6 @@ react automaticaly- PWA、Hooks、代码分割、热替换、HappyPack 多线程构建、ES6+语法 -## 注意的地方 - -- antd icon 打包体积过大：https://github.com/ant-design/ant-design/issues/12011，开了 gzip 之后还行 ## 构建 Start From adee2ad41eea1c4ec0a934c4a727fdca893528cb Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Thu, 16 Apr 2020 15:19:52 +0800 Subject: [PATCH 18/98] update --- mock/mock-data.js | 6 +-- package.json | 50 +++++++++++----------- src/component/footer/index.js | 5 +-- src/component/menu/index.js | 4 +- src/container/features/index.js | 6 +-- src/container/home/index.js | 6 +-- src/container/notfound/index.js | 6 +-- src/container/routers/index.js | 24 +++++------ src/container/test/container/page1.js | 6 +-- src/container/test/container/page2.js | 6 +-- src/container/test/container/page3.js | 6 +-- src/container/test/index.js | 49 +++++++++++++++------ src/container/testclass/container/page1.js | 8 ++-- src/container/testclass/container/page2.js | 8 ++-- src/container/testclass/container/page3.js | 8 ++-- src/container/testclass/index.js | 28 ++++++------ src/models/app.js | 10 ++--- src/models/test.js | 14 +++--- src/serviceWorker.js | 10 ++--- src/store/index.js | 4 +- src/util/server.js | 4 +- src/util/tools.js | 2 +- 22 files changed, 146 insertions(+), 124 deletions(-) diff --git a/mock/mock-data.js b/mock/mock-data.js index e6a0cabf..57731942 100644 --- a/mock/mock-data.js +++ b/mock/mock-data.js @@ -8,9 +8,9 @@ const ajaxTest = { "data|1-10": [ { "id|+1": 1, - email: "@EMAIL" - } - ] + email: "@EMAIL", + }, + ], }; exports.mockApi = (url, params) => { diff --git a/package.json b/package.json index 7c77409d..26ab7a83 100644 --- a/package.json +++ b/package.json @@ -24,60 +24,60 @@ }, "dependencies": { "@rematch/core": "^1.4.0", - "antd": "4.0.0", + "antd": "4.1.3", "axios": "^0.19.2", - "core-js": "^3.6.4", + "core-js": "^3.6.5", "history": "^4.10.1", "lodash": "^4.17.15", - "react": "^16.13.0", - "react-dom": "^16.13.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", "react-loadable": "^5.5.0", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "redux": "^4.0.5" }, "devDependencies": { - "@babel/core": "^7.8.6", + "@babel/core": "^7.9.0", "@babel/plugin-proposal-class-properties": "^7.8.3", "@babel/plugin-proposal-decorators": "^7.8.3", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3", - "@babel/plugin-proposal-object-rest-spread": "^7.8.3", - "@babel/plugin-proposal-optional-chaining": "^7.8.3", + "@babel/plugin-proposal-object-rest-spread": "^7.9.5", + "@babel/plugin-proposal-optional-chaining": "^7.9.0", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-transform-runtime": "^7.8.3", - "@babel/preset-env": "^7.8.6", - "@babel/preset-react": "^7.8.3", - "@babel/runtime": "^7.8.4", - "antd-dayjs-webpack-plugin": "^0.0.8", - "autoprefixer": "^9.7.4", + "@babel/plugin-transform-runtime": "^7.9.0", + "@babel/preset-env": "^7.9.5", + "@babel/preset-react": "^7.9.4", + "@babel/runtime": "^7.9.2", + "antd-dayjs-webpack-plugin": "^1.0.0", + "autoprefixer": "^9.7.6", "babel-eslint": "^10.1.0", - "babel-loader": "^8.0.6", + "babel-loader": "^8.1.0", "babel-plugin-import": "^1.13.0", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", - "css-loader": "^3.4.2", + "css-loader": "^3.5.2", "eslint": "^6.8.0", - "eslint-loader": "^3.0.3", - "eslint-plugin-prettier": "^3.1.2", - "eslint-plugin-react": "^7.18.3", - "eslint-plugin-react-hooks": "^2.5.0", + "eslint-loader": "^4.0.0", + "eslint-plugin-prettier": "^3.1.3", + "eslint-plugin-react": "^7.19.0", + "eslint-plugin-react-hooks": "^3.0.0", "express": "^4.17.1", "favicons-webpack-plugin": "3.0.1", - "file-loader": "^5.1.0", + "file-loader": "^6.0.0", "happypack": "^5.0.1", - "html-webpack-plugin": "^4.0.0-beta.11", + "html-webpack-plugin": "^4.2.0", "less": "^3.11.1", "less-loader": "^5.0.0", "mini-css-extract-plugin": "^0.9.0", "mockjs": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "postcss-loader": "^3.0.0", - "prettier": "1.19.1", - "style-loader": "1.1.3", + "prettier": "2.0.4", + "style-loader": "1.1.4", "sw-precache-webpack-plugin": "^1.0.0", "terser-webpack-plugin": "^2.3.5", - "url-loader": "^3.0.0", - "webpack": "^4.42.0", + "url-loader": "^4.1.0", + "webpack": "^4.42.1", "webpack-cli": "^3.3.11", "webpack-dev-middleware": "^3.7.2", "webpack-hot-middleware": "^2.25.0", diff --git a/src/component/footer/index.js b/src/component/footer/index.js index 1fa99160..888ec19f 100644 --- a/src/component/footer/index.js +++ b/src/component/footer/index.js @@ -5,12 +5,11 @@ import "./index.less"; export default function Footer(props) { return (
- © 2018-2019{" "}
+ © 2018-2020{" "}
+ rel="noopener noreferrer">
isluo.com
, Inc.
diff --git a/src/component/menu/index.js b/src/component/menu/index.js
index a47a5009..202beb9d 100644
--- a/src/component/menu/index.js
+++ b/src/component/menu/index.js
@@ -12,7 +12,7 @@ export default function Menu() {
to={{
pathname: "/test",
search: "?a=123&b=abc",
- state: { c: "456", d: "ABC" }
+ state: { c: "456", d: "ABC" },
}}
>
测试(hooks)
@@ -22,7 +22,7 @@ export default function Menu() {
to={{
pathname: "/testclass",
search: "?a=123&b=abc",
- state: { c: "456", d: "ABC" }
+ state: { c: "456", d: "ABC" },
}}
>
测试(class)
diff --git a/src/container/features/index.js b/src/container/features/index.js
index b3303a50..3aa81fc8 100644
--- a/src/container/features/index.js
+++ b/src/container/features/index.js
@@ -59,8 +59,8 @@ function FeaturesPageContainer(props) {
}
export default connect(
- state => ({}),
- dispatch => ({
- actions: {}
+ (state) => ({}),
+ (dispatch) => ({
+ actions: {},
})
)(FeaturesPageContainer);
diff --git a/src/container/home/index.js b/src/container/home/index.js
index 43867cbb..abda1a32 100644
--- a/src/container/home/index.js
+++ b/src/container/home/index.js
@@ -23,10 +23,10 @@ function HomePageContainer(props) {
}
export default connect(
- state => {
+ (state) => {
return {};
},
- dispatch => ({
- actions: {}
+ (dispatch) => ({
+ actions: {},
})
)(HomePageContainer);
diff --git a/src/container/notfound/index.js b/src/container/notfound/index.js
index aebf1024..47f43214 100644
--- a/src/container/notfound/index.js
+++ b/src/container/notfound/index.js
@@ -16,8 +16,8 @@ function NotFoundPageContainer() {
}
export default connect(
- state => ({}),
- dispatch => ({
- actions: {}
+ (state) => ({}),
+ (dispatch) => ({
+ actions: {},
})
)(NotFoundPageContainer);
diff --git a/src/container/routers/index.js b/src/container/routers/index.js
index af42916e..3861dc20 100644
--- a/src/container/routers/index.js
+++ b/src/container/routers/index.js
@@ -24,23 +24,23 @@ import "./index.less";
const Home = Loadable({
loader: () => import(/* webpackChunkName:'home' */ "../home"),
loading: Loading, // 自定义的Loading动画组件
- timeout: 10000 // 可以设置一个超时时间(s)来应对网络慢的情况（在Loading动画组件中可以配置error信息）
+ timeout: 10000, // 可以设置一个超时时间(s)来应对网络慢的情况（在Loading动画组件中可以配置error信息）
});
const Test = Loadable({
loader: () => import(/* webpackChunkName:'test' */ "../test"),
- loading: Loading
+ loading: Loading,
});
const TestClass = Loadable({
loader: () => import(/* webpackChunkName:'testclass' */ "../testclass"),
- loading: Loading
+ loading: Loading,
});
const Features = Loadable({
loader: () => import(/* webpackChunkName:'features' */ "../features"),
- loading: Loading
+ loading: Loading,
});
const NotFound = Loadable({
loader: () => import(/* webpackChunkName:'notfound' */ "../notfound"),
- loading: Loading
+ loading: Loading,
});
const history = createHistory(); // 实例化history对象
@@ -79,19 +79,19 @@ function RootRouterContainer(props) {
onEnter(Home, props)}
+ render={(props) => onEnter(Home, props)}
/>
onEnter(Features, props)}
+ render={(props) => onEnter(Features, props)}
/>
onEnter(Test, props)}
+ render={(props) => onEnter(Test, props)}
/>
onEnter(TestClass, props)}
+ render={(props) => onEnter(TestClass, props)}
/>
- 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， + + 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， +
- 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 + + 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 +
- 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" + + 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" +
- 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， + + 请特别注意，现在webpack.production.config.js中的publicPath配置为"/"， +
- 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 + + 如果你的项目最终打包后放到服务器上的访问路径为https://xxx.com，这没有问题 +
- 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" + + 如果你的项目访问路径为https://xxx.com/aaa，请把webpack.production.config.js中的publicPath配置为"/aaa/" +
@@ -128,11 +134,23 @@ function TestPageContainer({
Antd表单
内容...
+react automatically
这是一个 React 脚手架，没有使用 create-react-app
标准的 React+Redux 分层结构
经过了多个项目的实践，不停的更新和优化出来的。目前自己做项目也在用。 From 71486114a8b46dd50b5104d838a663a04331dcda Mon Sep 17 00:00:00 2001 From: LOGIC <376693576@qq.com> Date: Wed, 12 Aug 2020 16:51:28 +0800 Subject: [PATCH 29/98] update package --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 49894a6e..1e1bc294 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "@rematch/core": "^1.4.0", - "antd": "4.5.2", + "antd": "4.5.3", "axios": "^0.19.2", "core-js": "^3.6.5", "history": "^4.10.1", @@ -37,7 +37,7 @@ "redux": "^4.0.5" }, "devDependencies": { - "@babel/core": "^7.11.0", + "@babel/core": "^7.11.1", "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-proposal-decorators": "^7.10.5", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4", @@ -47,7 +47,7 @@ "@babel/plugin-transform-runtime": "^7.11.0", "@babel/preset-env": "^7.11.0", "@babel/preset-react": "^7.10.4", - "@babel/runtime": "^7.11.0", + "@babel/runtime": "^7.11.2", "antd-dayjs-webpack-plugin": "^1.0.1", "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", @@ -55,7 +55,7 @@ "babel-plugin-import": "^1.13.0", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", - "css-loader": "^4.2.0", + "css-loader": "^4.2.1", "eslint": "^7.6.0", "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^3.1.4", @@ -68,14 +68,14 @@ "html-webpack-plugin": "^4.3.0", "less": "^3.12.2", "less-loader": "^6.2.0", - "mini-css-extract-plugin": "^0.9.0", + "mini-css-extract-plugin": "^0.10.0", "mockjs": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "postcss-loader": "^3.0.0", "prettier": "2.0.5", "style-loader": "1.2.1", "sw-precache-webpack-plugin": "^1.0.0", - "terser-webpack-plugin": "^3.0.8", + "terser-webpack-plugin": "^4.1.0", "url-loader": "^4.1.0", "webpack": "^4.44.1", "webpack-cli": "^3.3.12", From a54ba41924fc946293e6390c581f97b69afdfd68 Mon Sep 17 00:00:00 2001 From: LOGIC <376693576@qq.com> Date: Tue, 8 Sep 2020 20:48:06 +0800 Subject: [PATCH 30/98] update package --- package.json | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 1e1bc294..1094bd73 100644 --- a/package.json +++ b/package.json @@ -24,11 +24,11 @@ }, "dependencies": { "@rematch/core": "^1.4.0", - "antd": "4.5.3", - "axios": "^0.19.2", + "antd": "4.6.3", + "axios": "^0.20.0", "core-js": "^3.6.5", "history": "^4.10.1", - "lodash": "^4.17.19", + "lodash": "^4.17.20", "react": "^16.13.1", "react-dom": "^16.13.1", "react-loadable": "^5.5.0", @@ -37,15 +37,15 @@ "redux": "^4.0.5" }, "devDependencies": { - "@babel/core": "^7.11.1", + "@babel/core": "^7.11.6", "@babel/plugin-proposal-class-properties": "^7.10.4", "@babel/plugin-proposal-decorators": "^7.10.5", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4", "@babel/plugin-proposal-object-rest-spread": "^7.11.0", "@babel/plugin-proposal-optional-chaining": "^7.11.0", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-transform-runtime": "^7.11.0", - "@babel/preset-env": "^7.11.0", + "@babel/plugin-transform-runtime": "^7.11.5", + "@babel/preset-env": "^7.11.5", "@babel/preset-react": "^7.10.4", "@babel/runtime": "^7.11.2", "antd-dayjs-webpack-plugin": "^1.0.1", @@ -55,24 +55,24 @@ "babel-plugin-import": "^1.13.0", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", - "css-loader": "^4.2.1", - "eslint": "^7.6.0", + "css-loader": "^4.2.2", + "eslint": "^7.8.1", "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-react": "^7.20.5", - "eslint-plugin-react-hooks": "^4.0.8", + "eslint-plugin-react": "^7.20.6", + "eslint-plugin-react-hooks": "^4.1.0", "express": "^4.17.1", "favicons-webpack-plugin": "4.2.0", - "file-loader": "^6.0.0", + "file-loader": "^6.1.0", "happypack": "^5.0.1", - "html-webpack-plugin": "^4.3.0", + "html-webpack-plugin": "^4.4.1", "less": "^3.12.2", - "less-loader": "^6.2.0", - "mini-css-extract-plugin": "^0.10.0", + "less-loader": "^7.0.1", + "mini-css-extract-plugin": "^0.11.0", "mockjs": "^1.1.0", - "optimize-css-assets-webpack-plugin": "^5.0.3", - "postcss-loader": "^3.0.0", - "prettier": "2.0.5", + "optimize-css-assets-webpack-plugin": "^5.0.4", + "postcss-loader": "^4.0.0", + "prettier": "2.1.1", "style-loader": "1.2.1", "sw-precache-webpack-plugin": "^1.0.0", "terser-webpack-plugin": "^4.1.0", From 5a155c4d3bf997d180a7cc7b4c9dcd23e7b0ab16 Mon Sep 17 00:00:00 2001 From: LOGIC <376693576@qq.com> Date: Wed, 16 Sep 2020 11:08:56 +0800 Subject: [PATCH 31/98] update packages --- package.json | 18 +++++++++--------- postcss.config.js | 4 +++- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 1094bd73..6440635c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "@rematch/core": "^1.4.0", - "antd": "4.6.3", + "antd": "4.6.4", "axios": "^0.20.0", "core-js": "^3.6.5", "history": "^4.10.1", @@ -49,18 +49,18 @@ "@babel/preset-react": "^7.10.4", "@babel/runtime": "^7.11.2", "antd-dayjs-webpack-plugin": "^1.0.1", - "autoprefixer": "^9.8.6", + "autoprefixer": "9.8.6", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", "babel-plugin-import": "^1.13.0", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", - "css-loader": "^4.2.2", - "eslint": "^7.8.1", + "css-loader": "^4.3.0", + "eslint": "^7.9.0", "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.20.6", - "eslint-plugin-react-hooks": "^4.1.0", + "eslint-plugin-react-hooks": "^4.1.2", "express": "^4.17.1", "favicons-webpack-plugin": "4.2.0", "file-loader": "^6.1.0", @@ -68,14 +68,14 @@ "html-webpack-plugin": "^4.4.1", "less": "^3.12.2", "less-loader": "^7.0.1", - "mini-css-extract-plugin": "^0.11.0", + "mini-css-extract-plugin": "^0.11.2", "mockjs": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.4", - "postcss-loader": "^4.0.0", - "prettier": "2.1.1", + "postcss-loader": "^4.0.2", + "prettier": "2.1.2", "style-loader": "1.2.1", "sw-precache-webpack-plugin": "^1.0.0", - "terser-webpack-plugin": "^4.1.0", + "terser-webpack-plugin": "^4.2.1", "url-loader": "^4.1.0", "webpack": "^4.44.1", "webpack-cli": "^3.3.12", diff --git a/postcss.config.js b/postcss.config.js index 796abe22..fe843fae 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,4 +1,6 @@ /** postcss-loader 解析器所需的配置文件 **/ module.exports = { - plugins: [require("autoprefixer")()] + plugins: [ + require('autoprefixer')() + ] }; From d4dd4de57009c00aa1e5f8b538e19f0266015d57 Mon Sep 17 00:00:00 2001 From: LOGIC <376693576@qq.com> Date: Fri, 9 Oct 2020 10:59:12 +0800 Subject: [PATCH 32/98] update packages --- package.json | 20 ++++++++++---------- server.js | 8 ++++---- src/models/test.js | 6 +++++- src/util/server.js | 5 +++-- 4 files changed, 22 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 6440635c..19e6a38c 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "@rematch/core": "^1.4.0", - "antd": "4.6.4", + "antd": "^4.6.6", "axios": "^0.20.0", "core-js": "^3.6.5", "history": "^4.10.1", @@ -49,35 +49,35 @@ "@babel/preset-react": "^7.10.4", "@babel/runtime": "^7.11.2", "antd-dayjs-webpack-plugin": "^1.0.1", - "autoprefixer": "9.8.6", + "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", "babel-plugin-import": "^1.13.0", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", "css-loader": "^4.3.0", - "eslint": "^7.9.0", + "eslint": "^7.10.0", "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-react": "^7.20.6", + "eslint-plugin-react": "^7.21.3", "eslint-plugin-react-hooks": "^4.1.2", "express": "^4.17.1", "favicons-webpack-plugin": "4.2.0", "file-loader": "^6.1.0", "happypack": "^5.0.1", - "html-webpack-plugin": "^4.4.1", + "html-webpack-plugin": "^4.5.0", "less": "^3.12.2", "less-loader": "^7.0.1", - "mini-css-extract-plugin": "^0.11.2", + "mini-css-extract-plugin": "^0.12.0", "mockjs": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.4", - "postcss-loader": "^4.0.2", + "postcss-loader": "^4.0.3", "prettier": "2.1.2", - "style-loader": "1.2.1", + "style-loader": "1.3.0", "sw-precache-webpack-plugin": "^1.0.0", - "terser-webpack-plugin": "^4.2.1", + "terser-webpack-plugin": "^4.2.3", "url-loader": "^4.1.0", - "webpack": "^4.44.1", + "webpack": "^4.44.2", "webpack-cli": "^3.3.12", "webpack-dev-middleware": "^3.7.2", "webpack-hot-middleware": "^2.25.0", diff --git a/server.js b/server.js index 9ff59022..52ccb9ce 100644 --- a/server.js +++ b/server.js @@ -56,10 +56,10 @@ if (env === "production") { } /** 监听POST请求，返回MOCK模拟数据 **/ -app.post("*", (req, res, next) => { - const result = mock.mockApi(req.originalUrl, req.body); - res.send(result); -}); +// app.post("*", (req, res, next) => { +// const result = mock.mockApi(req.originalUrl, req.body); +// res.send(result); +// }); /** 启动服务 **/ app.listen(PORT, () => { diff --git a/src/models/test.js b/src/models/test.js index 8b9d2c7d..5c723d1f 100644 --- a/src/models/test.js +++ b/src/models/test.js @@ -35,7 +35,11 @@ export default { // 测试 - 异步请求 async serverFetch(params = {}) { try { - const res = await Server.newServer("url.ajax", params, "post"); + const res = await Server.newServer( + "url.ajax", + { a: 123, b: "456" }, + "post" + ); if (res && res.data.status === 200) { dispatch({ type: "test/setFetchValue", payload: res.data.data }); // dispatch是全局根dispatch,也能这么用 } diff --git a/src/util/server.js b/src/util/server.js index 277062d8..f67b7de4 100644 --- a/src/util/server.js +++ b/src/util/server.js @@ -4,6 +4,7 @@ * **/ import axios from "axios"; +import qs from "qs"; export default class ApiService { static newServer(url, bodyObj = {}, type = "post") { @@ -11,10 +12,10 @@ export default class ApiService { url, method: type, headers: { - "Content-Type": "application/json;charset=utf-8", + "Content-Type": "application/x-www-form-urlencoded; charset=utf-8", }, withCredentials: true, - data: JSON.stringify(bodyObj), + data: qs.stringify(bodyObj), }); } } From dabaa21f67b937ef9275c3bcce3707ba06e6c6dc Mon Sep 17 00:00:00 2001 From: LOGIC <376693576@qq.com> Date: Sun, 18 Oct 2020 22:56:23 +0800 Subject: [PATCH 33/98] update autoprefixer 10.x --- package.json | 55 +++++++++++++++++----------------- postcss.config.js | 2 +- src/container/routers/index.js | 1 + webpack.dev.config.js | 2 +- 4 files changed, 31 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 19e6a38c..bf33c247 100644 --- a/package.json +++ b/package.json @@ -24,61 +24,62 @@ }, "dependencies": { "@rematch/core": "^1.4.0", - "antd": "^4.6.6", + "antd": "^4.7.0", "axios": "^0.20.0", "core-js": "^3.6.5", "history": "^4.10.1", "lodash": "^4.17.20", - "react": "^16.13.1", - "react-dom": "^16.13.1", + "react": "^16.14.0", + "react-dom": "^16.14.0", "react-loadable": "^5.5.0", "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", "redux": "^4.0.5" }, "devDependencies": { - "@babel/core": "^7.11.6", - "@babel/plugin-proposal-class-properties": "^7.10.4", - "@babel/plugin-proposal-decorators": "^7.10.5", - "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4", - "@babel/plugin-proposal-object-rest-spread": "^7.11.0", - "@babel/plugin-proposal-optional-chaining": "^7.11.0", + "@babel/core": "7.12.3", + "@babel/plugin-proposal-class-properties": "^7.12.1", + "@babel/plugin-proposal-decorators": "^7.12.1", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1", + "@babel/plugin-proposal-object-rest-spread": "^7.12.1", + "@babel/plugin-proposal-optional-chaining": "^7.12.1", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-transform-runtime": "^7.11.5", - "@babel/preset-env": "^7.11.5", - "@babel/preset-react": "^7.10.4", - "@babel/runtime": "^7.11.2", + "@babel/plugin-transform-runtime": "^7.12.1", + "@babel/preset-env": "^7.12.1", + "@babel/preset-react": "^7.12.1", + "@babel/runtime": "^7.12.1", "antd-dayjs-webpack-plugin": "^1.0.1", - "autoprefixer": "^9.8.6", + "autoprefixer": "^10.0.1", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", - "babel-plugin-import": "^1.13.0", + "babel-plugin-import": "^1.13.1", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", - "css-loader": "^4.3.0", - "eslint": "^7.10.0", + "css-loader": "5.0.0", + "eslint": "^7.11.0", "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-react": "^7.21.3", + "eslint-plugin-react": "^7.21.4", "eslint-plugin-react-hooks": "^4.1.2", "express": "^4.17.1", "favicons-webpack-plugin": "4.2.0", - "file-loader": "^6.1.0", + "file-loader": "^6.1.1", "happypack": "^5.0.1", "html-webpack-plugin": "^4.5.0", "less": "^3.12.2", - "less-loader": "^7.0.1", - "mini-css-extract-plugin": "^0.12.0", + "less-loader": "^7.0.2", + "mini-css-extract-plugin": "^1.0.0", "mockjs": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.4", - "postcss-loader": "^4.0.3", + "postcss": "^8.1.1", + "postcss-loader": "^4.0.4", "prettier": "2.1.2", - "style-loader": "1.3.0", + "style-loader": "2.0.0", "sw-precache-webpack-plugin": "^1.0.0", - "terser-webpack-plugin": "^4.2.3", - "url-loader": "^4.1.0", - "webpack": "^4.44.2", - "webpack-cli": "^3.3.12", + "terser-webpack-plugin": "^5.0.0", + "url-loader": "^4.1.1", + "webpack": "4.x", + "webpack-cli": "^4.0.0", "webpack-dev-middleware": "^3.7.2", "webpack-hot-middleware": "^2.25.0", "webpackbar": "^4.0.0", diff --git a/postcss.config.js b/postcss.config.js index fe843fae..6ebf6265 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ /** postcss-loader 解析器所需的配置文件 **/ module.exports = { plugins: [ - require('autoprefixer')() + require('autoprefixer') ] }; diff --git a/src/container/routers/index.js b/src/container/routers/index.js index 3861dc20..6f17f0ec 100644 --- a/src/container/routers/index.js +++ b/src/container/routers/index.js @@ -11,6 +11,7 @@ import zhCN from "antd/lib/locale-provider/zh_CN"; // import {createBrowserHistory as createHistory} from "history/"; // URL模式的history import { createHashHistory as createHistory } from "history"; // 锚点模式的history + import Loadable from "react-loadable"; // 用于代码分割时动态加载模块 /** 普通组件 **/ diff --git a/webpack.dev.config.js b/webpack.dev.config.js index 4b8bfc96..b62cf886 100644 --- a/webpack.dev.config.js +++ b/webpack.dev.config.js @@ -16,7 +16,7 @@ module.exports = { output: { path: __dirname + "/", // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径 publicPath: PUBLIC_PATH, // 文件解析路径，index.html中引用的路径会被设置为相对于此路径 - filename: "bundle.js", // 编译后的文件名字 + filename: "bundle-[hash].js", // 编译后的文件名字 }, devtool: "eval-source-map", // 报错的时候在控制台输出哪一行报错 optimization: { From 0035fcc2bfb68e13ed314ba6627001b9b8473b58 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Tue, 20 Oct 2020 02:12:11 +0800 Subject: [PATCH 34/98] update --- "\344\276\235\350\265\226\346\270\205\345\215\225.md" | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git "a/\344\276\235\350\265\226\346\270\205\345\215\225.md" "b/\344\276\235\350\265\226\346\270\205\345\215\225.md" index 3e56761b..2bcd5abf 100644 --- "a/\344\276\235\350\265\226\346\270\205\345\215\225.md" +++ "b/\344\276\235\350\265\226\346\270\205\345\215\225.md" @@ -5,7 +5,7 @@ ```javascript { "name": "react_luo", // 项目名字 - "version": "1.0.0", // 项目版本 + "version": "1.0.0", // 项目版本 "description": "react脚手架,最新技术", // 项目简介 "main": "index.js", // 项目入口，没用，因为配置了server.js "scripts": { // 自定义的脚本 From 50510209c1699e07fb120efa1cd6fee76f662009 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Tue, 20 Oct 2020 14:15:35 +0800 Subject: [PATCH 35/98] update package.json --- package.json | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index bf33c247..fb1eb419 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "@rematch/core": "^1.4.0", - "antd": "^4.7.0", + "antd": "^4.7.2", "axios": "^0.20.0", "core-js": "^3.6.5", "history": "^4.10.1", @@ -37,7 +37,7 @@ "redux": "^4.0.5" }, "devDependencies": { - "@babel/core": "7.12.3", + "@babel/core": "^7.12.3", "@babel/plugin-proposal-class-properties": "^7.12.1", "@babel/plugin-proposal-decorators": "^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1", @@ -55,11 +55,11 @@ "babel-plugin-import": "^1.13.1", "body-parser": "^1.19.0", "clean-webpack-plugin": "^3.0.0", - "css-loader": "5.0.0", + "css-loader": "^5.0.0", "eslint": "^7.11.0", "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-react": "^7.21.4", + "eslint-plugin-react": "^7.21.5", "eslint-plugin-react-hooks": "^4.1.2", "express": "^4.17.1", "favicons-webpack-plugin": "4.2.0", @@ -68,18 +68,18 @@ "html-webpack-plugin": "^4.5.0", "less": "^3.12.2", "less-loader": "^7.0.2", - "mini-css-extract-plugin": "^1.0.0", + "mini-css-extract-plugin": "^1.1.0", "mockjs": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.4", "postcss": "^8.1.1", "postcss-loader": "^4.0.4", - "prettier": "2.1.2", - "style-loader": "2.0.0", + "prettier": "^2.1.2", + "style-loader": "^2.0.0", "sw-precache-webpack-plugin": "^1.0.0", "terser-webpack-plugin": "^5.0.0", "url-loader": "^4.1.1", - "webpack": "4.x", - "webpack-cli": "^4.0.0", + "webpack": "^4.x", + "webpack-cli": "^4.1.0", "webpack-dev-middleware": "^3.7.2", "webpack-hot-middleware": "^2.25.0", "webpackbar": "^4.0.0", From 9778c2498257d2223bd84dcf2484bad19e396443 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Tue, 20 Oct 2020 15:11:27 +0800 Subject: [PATCH 36/98] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 89c6ca38..b5127749 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ [](https://codebeat.co/projects/github-com-javaluo-react-luo-master) [](https://github.com/prettier/prettier)  +## 注： antd和favicons-webpack-plugin目前还不支持webpack5,现在打包会失败 + ## what is this? react automatically
From f6b9a7d5ec9905daaf78d1a36054d57e170ccf95 Mon Sep 17 00:00:00 2001 From: Logic <376693576@qq.com> Date: Wed, 21 Oct 2020 14:37:10 +0800 Subject: [PATCH 37/98] update webpack 5 / react 17 --- README.md | 2 +- package.json | 14 ++--- server.js | 8 +-- src/component/footer/index.js | 2 +- src/container/home/index.js | 2 +- webpack.dev.config.js | 2 +- webpack.production.config.js | 110 +++++++++++++++++----------------- 7 files changed, 70 insertions(+), 70 deletions(-) diff --git a/README.md b/README.md index b5127749..d7b39834 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ [](https://codebeat.co/projects/github-com-javaluo-react-luo-master) [](https://github.com/prettier/prettier)  -## 注： antd和favicons-webpack-plugin目前还不支持webpack5,现在打包会失败 +## 注： favicons-webpack-plugin, sw-precache-webpack-plugin 目前还不支持webpack5, 所以暂时取消了PWA相关设置 ## what is this? diff --git a/package.json b/package.json index fb1eb419..719fa426 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "node server.js --max_old_space_size=4096", - "build": "webpack -p --config webpack.production.config.js", + "build": "webpack --config webpack.production.config.js", "dist": "set NODE_ENV=production&& node server.js", "distmac": "export NODE_ENV=production&& node server.js", "prettier": "prettier --write \"{src,mock}/**/*.{js,css,less}\"", @@ -29,8 +29,8 @@ "core-js": "^3.6.5", "history": "^4.10.1", "lodash": "^4.17.20", - "react": "^16.14.0", - "react-dom": "^16.14.0", + "react": "^17.0.0", + "react-dom": "^17.0.0", "react-loadable": "^5.5.0", "react-redux": "^7.2.1", "react-router-dom": "^5.2.0", @@ -60,7 +60,7 @@ "eslint-loader": "^4.0.2", "eslint-plugin-prettier": "^3.1.4", "eslint-plugin-react": "^7.21.5", - "eslint-plugin-react-hooks": "^4.1.2", + "eslint-plugin-react-hooks": "^4.2.0", "express": "^4.17.1", "favicons-webpack-plugin": "4.2.0", "file-loader": "^6.1.1", @@ -68,17 +68,17 @@ "html-webpack-plugin": "^4.5.0", "less": "^3.12.2", "less-loader": "^7.0.2", - "mini-css-extract-plugin": "^1.1.0", + "mini-css-extract-plugin": "^1.1.1", "mockjs": "^1.1.0", "optimize-css-assets-webpack-plugin": "^5.0.4", - "postcss": "^8.1.1", + "postcss": "^8.1.2", "postcss-loader": "^4.0.4", "prettier": "^2.1.2", "style-loader": "^2.0.0", "sw-precache-webpack-plugin": "^1.0.0", "terser-webpack-plugin": "^5.0.0", "url-loader": "^4.1.1", - "webpack": "^4.x", + "webpack": "^5.1.3", "webpack-cli": "^4.1.0", "webpack-dev-middleware": "^3.7.2", "webpack-hot-middleware": "^2.25.0", diff --git a/server.js b/server.js index 52ccb9ce..9ff59022 100644 --- a/server.js +++ b/server.js @@ -56,10 +56,10 @@ if (env === "production") { } /** 监听POST请求，返回MOCK模拟数据 **/ -// app.post("*", (req, res, next) => { -// const result = mock.mockApi(req.originalUrl, req.body); -// res.send(result); -// }); +app.post("*", (req, res, next) => { + const result = mock.mockApi(req.originalUrl, req.body); + res.send(result); +}); /** 启动服务 **/ app.listen(PORT, () => { diff --git a/src/component/footer/index.js b/src/component/footer/index.js index d1cd7345..6f2f6ccd 100644 --- a/src/component/footer/index.js +++ b/src/component/footer/index.js @@ -11,7 +11,7 @@ export default function Footer(props) { target="_blank" rel="noopener noreferrer" > - isluo.com + blog.isluo.com , Inc. diff --git a/src/container/home/index.js b/src/container/home/index.js index abda1a32..064648b5 100644 --- a/src/container/home/index.js +++ b/src/container/home/index.js @@ -15,7 +15,7 @@ function HomePageContainer(props) {
React-Luo
- react16、redux4、router5、webpack4、eslint、babel7、antd3
+ react17、redux4、router5、webpack5、eslint、babel7、antd4
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index b62cf886..d563fae7 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -16,7 +16,7 @@ module.exports = {
output: {
path: __dirname + "/", // 将打包好的文件放在此路径下，dev模式中，只会在内存中存在，不会真正的打包到此路径
publicPath: PUBLIC_PATH, // 文件解析路径，index.html中引用的路径会被设置为相对于此路径
- filename: "bundle-[hash].js", // 编译后的文件名字
+ filename: "bundle-[contenthash].js", // 编译后的文件名字
},
devtool: "eval-source-map", // 报错的时候在控制台输出哪一行报错
optimization: {
diff --git a/webpack.production.config.js b/webpack.production.config.js
index f8060b09..9b7b5d0b 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -6,10 +6,10 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 为了单独
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前清除旧的build文件夹
-const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin"); // 生成一个server-worker用于缓存
-const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); // 自动生成各尺寸的favicon图标
+// const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin"); // 生成一个server-worker用于缓存 webpack5 wating up
+// const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); // 自动生成各尺寸的favicon图标 webpack5 wating up
const TerserPlugin = require("terser-webpack-plugin"); // 优化js
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩CSS
+// const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩CSS
const webpackbar = require("webpackbar"); // 进度条
/**
* 基础路径
@@ -33,6 +33,7 @@ module.exports = {
children: false, // 不输出子模块的打包信息
},
optimization: {
+ minimize: true,
minimizer: [
new TerserPlugin({
parallel: true, // 多线程并行构建
@@ -45,7 +46,6 @@ module.exports = {
},
},
}),
- new OptimizeCSSAssetsPlugin({}),
],
splitChunks: {
chunks: "all",
@@ -141,29 +141,29 @@ module.exports = {
filename: "dist/[name].[chunkhash:8].css", // 生成的文件名
}),
/**
- * 生成一个server-work用于缓存资源（PWA）
+ * 生成一个server-work用于缓存资源（PWA） webpack5 wating up
* */
- new SWPrecacheWebpackPlugin({
- dontCacheBustUrlsMatching: /\.\w{8}\./,
- filename: "service-worker.js",
- logger(message) {
- if (message.indexOf("Total precache size is") === 0) {
- return;
- }
- if (message.indexOf("Skipping static resource") === 0) {
- return;
- }
- console.log(message);
- },
- minify: true, // 压缩
- navigateFallback: PUBLIC_PATH, // 遇到不存在的URL时，跳转到主页
- navigateFallbackWhitelist: [/^(?!\/__).*/], // 忽略从/__开始的网址，参考 https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
- staticFileGlobsIgnorePatterns: [
- /\.map$/,
- /asset-manifest\.json$/,
- /\.cache$/,
- ], // 不缓存sourcemaps,它们太大了
- }),
+ // new SWPrecacheWebpackPlugin({
+ // dontCacheBustUrlsMatching: /\.\w{8}\./,
+ // filename: "service-worker.js",
+ // logger(message) {
+ // if (message.indexOf("Total precache size is") === 0) {
+ // return;
+ // }
+ // if (message.indexOf("Skipping static resource") === 0) {
+ // return;
+ // }
+ // console.log(message);
+ // },
+ // minify: true, // 压缩
+ // navigateFallback: PUBLIC_PATH, // 遇到不存在的URL时，跳转到主页
+ // navigateFallbackWhitelist: [/^(?!\/__).*/], // 忽略从/__开始的网址，参考 https://github.com/facebookincubator/create-react-app/issues/2237#issuecomment-302693219
+ // staticFileGlobsIgnorePatterns: [
+ // /\.map$/,
+ // /asset-manifest\.json$/,
+ // /\.cache$/,
+ // ], // 不缓存sourcemaps,它们太大了
+ // }),
/**
* 自动生成HTML，并注入各参数
* **/
@@ -174,39 +174,39 @@ module.exports = {
inject: true, // 是否将js放在body的末尾
}),
/**
- * 自动生成各种类型的favicon图标
+ * 自动生成各种类型的favicon图标 webpack5 wating up
* 自动生成manifest.json文件
* 这么做是为了各种设备上的扩展功能，PWA桌面图标/应用启动图标等，主题等
* https://github.com/itgalaxy/favicons#usage
* **/
- new FaviconsWebpackPlugin({
- logo: "./public/favicon.png", // 原始图片路径
- // prefix: "", // 自定义目录，把生成的文件存在此目录下
- favicons: {
- appName: "ReactPWA", // 你的APP全称
- appShortName: "React", // 你的APP简称，手机某些地方会显示，比如切换多个APP时显示的标题
- appDescription: "ReactPWA Demo", // 你的APP简介
- background: "#222222", // APP启动页的背景色
- theme_color: "#222222", // APP的主题色
- appleStatusBarStyle: "black-translucent", // 苹果手机状态栏样式
- display: "standalone", // 是否显示搜索框，PWA就别显示了
- start_url: PUBLIC_PATH, // 起始页，‘.’会自动到主页，比'/'好，尤其是网站没有部署到根域名时
- logging: false, // 是否输出日志
- pixel_art: false, // 是否自动锐化一下图标，仅离线模式可用
- loadManifestWithCredentials: false, // 浏览器在获取manifest.json时默认不会代cookie。如果需要请设置true
- icons: {
- // 生成哪些平台需要的图标
- android: true, // 安卓
- appleIcon: false, // 苹果
- appleStartup: false, // 苹果启动页
- coast: false, // opera
- favicons: true, // web小图标
- firefox: false, // 火狐
- windows: false, // windows8 桌面应用
- yandex: false, // Yandex浏览器
- },
- },
- }),
+ // new FaviconsWebpackPlugin({
+ // logo: "./public/favicon.png", // 原始图片路径
+ // // prefix: "", // 自定义目录，把生成的文件存在此目录下
+ // favicons: {
+ // appName: "ReactPWA", // 你的APP全称
+ // appShortName: "React", // 你的APP简称，手机某些地方会显示，比如切换多个APP时显示的标题
+ // appDescription: "ReactPWA Demo", // 你的APP简介
+ // background: "#222222", // APP启动页的背景色
+ // theme_color: "#222222", // APP的主题色
+ // appleStatusBarStyle: "black-translucent", // 苹果手机状态栏样式
+ // display: "standalone", // 是否显示搜索框，PWA就别显示了
+ // start_url: PUBLIC_PATH, // 起始页，‘.’会自动到主页，比'/'好，尤其是网站没有部署到根域名时
+ // logging: false, // 是否输出日志
+ // pixel_art: false, // 是否自动锐化一下图标，仅离线模式可用
+ // loadManifestWithCredentials: false, // 浏览器在获取manifest.json时默认不会代cookie。如果需要请设置true
+ // icons: {
+ // // 生成哪些平台需要的图标
+ // android: true, // 安卓
+ // appleIcon: false, // 苹果
+ // appleStartup: false, // 苹果启动页
+ // coast: false, // opera
+ // favicons: true, // web小图标
+ // firefox: false, // 火狐
+ // windows: false, // windows8 桌面应用
+ // yandex: false, // Yandex浏览器
+ // },
+ // },
+ // }),
],
resolve: {
extensions: [".js", ".jsx", ".less", ".css", ".wasm"], // 后缀名自动补全
From c51771b6d6c182a7bfe99973ebe3c7ac24454fcc Mon Sep 17 00:00:00 2001
From: Logic <376693576@qq.com>
Date: Wed, 21 Oct 2020 15:23:59 +0800
Subject: [PATCH 38/98] update use css-minimizer-webpack-plugin
---
package.json | 2 +-
webpack.dev.config.js | 1 +
webpack.production.config.js | 14 +++++++++-----
3 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/package.json b/package.json
index 719fa426..c4e4c698 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
"body-parser": "^1.19.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
+ "css-minimizer-webpack-plugin": "^1.1.5",
"eslint": "^7.11.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.1.4",
@@ -70,7 +71,6 @@
"less-loader": "^7.0.2",
"mini-css-extract-plugin": "^1.1.1",
"mockjs": "^1.1.0",
- "optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss": "^8.1.2",
"postcss-loader": "^4.0.4",
"prettier": "^2.1.2",
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index d563fae7..130851ac 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -7,6 +7,7 @@ const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const HappyPack = require("happypack"); // 多线程编译
const webpackbar = require("webpackbar");
const PUBLIC_PATH = "/"; // 基础路径
+
module.exports = {
mode: "development",
entry: [
diff --git a/webpack.production.config.js b/webpack.production.config.js
index 9b7b5d0b..6a2abd66 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -2,14 +2,14 @@
const path = require("path");
const webpack = require("webpack"); // webpack核心
-const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 为了单独打包css
+const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 将CSS提取出来，而不是和js混在一起
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); // 对CSS进行压缩
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 生成html
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 每次打包前清除旧的build文件夹
// const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin"); // 生成一个server-worker用于缓存 webpack5 wating up
// const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); // 自动生成各尺寸的favicon图标 webpack5 wating up
-const TerserPlugin = require("terser-webpack-plugin"); // 优化js
-// const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // 压缩CSS
+const TerserPlugin = require("terser-webpack-plugin"); // 对js进行压缩
const webpackbar = require("webpackbar"); // 进度条
/**
* 基础路径
@@ -46,6 +46,7 @@ module.exports = {
},
},
}),
+ new CssMinimizerPlugin(),
],
splitChunks: {
chunks: "all",
@@ -62,7 +63,10 @@ module.exports = {
{
// .css 解析
test: /\.css$/,
- use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+ use: [
+ MiniCssExtractPlugin.loader,
+ "css-loader", "postcss-loader"
+ ],
},
{
// .less 解析
@@ -135,7 +139,7 @@ module.exports = {
}),
}),
/**
- * 提取CSS等样式生成单独的CSS文件
+ * 提取CSS等样式生成单独的CSS文件,不然最终文件只有js； css全部包含在js中
* **/
new MiniCssExtractPlugin({
filename: "dist/[name].[chunkhash:8].css", // 生成的文件名
From 98d8f9aef101b605394e260491ee53bd410b3c5a Mon Sep 17 00:00:00 2001
From: Logic <376693576@qq.com>
Date: Mon, 26 Oct 2020 08:39:41 +0800
Subject: [PATCH 39/98] update packages for webpack5
---
package.json | 20 ++++++++++----------
webpack.production.config.js | 2 +-
2 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/package.json b/package.json
index c4e4c698..9e64ab48 100644
--- a/package.json
+++ b/package.json
@@ -24,13 +24,13 @@
},
"dependencies": {
"@rematch/core": "^1.4.0",
- "antd": "^4.7.2",
- "axios": "^0.20.0",
+ "antd": "^4.7.3",
+ "axios": "^0.21.0",
"core-js": "^3.6.5",
"history": "^4.10.1",
"lodash": "^4.17.20",
- "react": "^17.0.0",
- "react-dom": "^17.0.0",
+ "react": "^17.0.1",
+ "react-dom": "^17.0.1",
"react-loadable": "^5.5.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
@@ -57,7 +57,7 @@
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"css-minimizer-webpack-plugin": "^1.1.5",
- "eslint": "^7.11.0",
+ "eslint": "^7.12.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
@@ -66,19 +66,19 @@
"favicons-webpack-plugin": "4.2.0",
"file-loader": "^6.1.1",
"happypack": "^5.0.1",
- "html-webpack-plugin": "^4.5.0",
+ "html-webpack-plugin": "^5.0.0-alpha.7",
"less": "^3.12.2",
"less-loader": "^7.0.2",
- "mini-css-extract-plugin": "^1.1.1",
+ "mini-css-extract-plugin": "^1.2.0",
"mockjs": "^1.1.0",
- "postcss": "^8.1.2",
+ "postcss": "^8.1.4",
"postcss-loader": "^4.0.4",
"prettier": "^2.1.2",
"style-loader": "^2.0.0",
"sw-precache-webpack-plugin": "^1.0.0",
- "terser-webpack-plugin": "^5.0.0",
+ "terser-webpack-plugin": "^5.0.1",
"url-loader": "^4.1.1",
- "webpack": "^5.1.3",
+ "webpack": "^5.2.0",
"webpack-cli": "^4.1.0",
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0",
diff --git a/webpack.production.config.js b/webpack.production.config.js
index 6a2abd66..074f13fa 100644
--- a/webpack.production.config.js
+++ b/webpack.production.config.js
@@ -29,7 +29,7 @@ module.exports = {
chunkFilename: "dist/[name].[chunkhash:8].chunk.js",
},
stats: {
- warningsFilter: (warning) => /Conflicting order/gm.test(warning), // 不输出一些警告，多为因CSS引入顺序不同导致的警告
+
children: false, // 不输出子模块的打包信息
},
optimization: {
From 8df8a950aa5f1406138ebd9ac1daa92da158584e Mon Sep 17 00:00:00 2001
From: Logic <376693576@qq.com>
Date: Mon, 26 Oct 2020 17:09:06 +0800
Subject: [PATCH 40/98] update
---
package.json | 2 +
public/index.html | 7 ++
src/index.js | 4 +-
src/serviceWorker.js | 135 -----------------------------------
webpack.dev.config.js | 18 ++++-
webpack.production.config.js | 69 +++++++++---------
6 files changed, 58 insertions(+), 177 deletions(-)
delete mode 100644 src/serviceWorker.js
diff --git a/package.json b/package.json
index 9e64ab48..3b308772 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
"babel-plugin-import": "^1.13.1",
"body-parser": "^1.19.0",
"clean-webpack-plugin": "^3.0.0",
+ "copy-webpack-plugin": "^6.2.1",
"css-loader": "^5.0.0",
"css-minimizer-webpack-plugin": "^1.1.5",
"eslint": "^7.12.0",
@@ -83,6 +84,7 @@
"webpack-dev-middleware": "^3.7.2",
"webpack-hot-middleware": "^2.25.0",
"webpackbar": "^4.0.0",
+ "workbox-webpack-plugin": "^6.0.0-alpha.3",
"xml-loader": "^1.2.1"
},
"browserslist": [
diff --git a/public/index.html b/public/index.html
index 99054e47..1ceeadf3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -8,5 +8,12 @@
+