编写部分文档

liumengniu · Sep 4, 2024 · b4675c2 · b4675c2
1 parent e9b87d4
commit b4675c2
Show file tree

Hide file tree

Showing 17 changed files with 1,135 additions and 161 deletions.
diff --git a/.vitepress/config.mjs b/.vitepress/config.mjs
@@ -18,24 +18,32 @@ export default defineConfig({
     sidebar: [
       {text: '简介', link: '/docs/introduction/index'},
       { text: '快速开始', link: '/docs/getting-started/index'},
-      { text: '开发',collapsed:false, link: '/docs/getting-started/index',
+      { text: '开发',collapsed:false,
         items: [
           { text: '项目结构', link: '/docs/development/project-structure' },
           { text: '渲染进程', link: '/docs/development/rendering-process' },
           { text: '主进程', link: '/docs/development/main-process' },
           { text: 'create-react-app配置', link: '/docs/development/cra-setting' },
+          { text: '文件系统', link: '/docs/development/file-system' },
         ]
       },
-      { text: '部署',collapsed:false, link: '/docs/getting-started/index',
+      { text: '生产部署',collapsed:false,
         items: [
-          { text: '生产编译', link: '/docs/development/project-structure' },
-          { text: '桌面应用更新', link: '/docs/development/rendering-process' },
+          {text: '生产编译', link: '/docs/production/index'},
+          {
+            text: '应用更新', collapsed: false, items: [
+              {text: 'windows环境', link: '/docs/production/app-updates/windows'},
+              {text: 'linux环境', link: '/docs/production/app-updates/linux'},
+            ]
+          },
+          {text: '客户端生产日志', link: '/docs/production/logger'},
         ]
       },
+      {text: '常见问题', link: '/docs/qa/index'},
     ],
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
+      { icon: 'github', link: 'https://github.com/liumengniu/electron-react' }
     ]
   }
 })
diff --git a/README.md b/README.md
@@ -104,4 +104,10 @@ Node.js 18 需要监听 127.0.0.1来代替localhost
 远程地址上传.exe文件和 latest.yml即可自动更新
 上传exe.blockmap可以加速
 
-```
+```
+
+## 🌟 Star History
+
+<br>
+
+[![Star History Chart](https://api.star-history.com/svg?repos=liumengniu/electron-react&type=Timeline)](https://api.star-history.com/svg?repos=liumengniu/electron-react&type=Timeline)
diff --git a/api-examples.md b/api-examples.md
diff --git a/docs/development/cra-setting.md b/docs/development/cra-setting.md
@@ -0,0 +1,147 @@
+# create-react-app 相关配置
+
+cra是react官方在v18前的默认脚手架，18以后react官方主推 next.js 为代表的SSR框架，
+桌面应用这种富客户端软件不适合服务端渲染，所以还是采用cra
+cra配置路径在 "根目录/craco.config.js"
+
+## cra相关配置说明
+
+cra的配置完全兼容webpack
+
+```js
+const path = require("path")
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer")
+const TerserPlugin = require("terser-webpack-plugin")
+
+const { whenProd } = require("@craco/craco")
+
+module.exports = {
+	devServer: {
+		port: 1718,   // 开发服务器端口号
+		open: false   // 不自动打开浏览器
+	},
+	webpack: {
+		alias: {
+			'@': path.resolve('src'),  // 设置别名 '@' 指向 'src' 目录
+			'@statics': path.resolve(__dirname, 'src/renderer/statics'),  // '@statics' 指向静态资源目录
+			'@views': path.resolve(__dirname, 'src/renderer/views'),  // '@views' 指向视图目录
+			'@comp': path.resolve(__dirname, 'src/renderer/components'),  // '@comp' 指向组件目录
+			'@services': path.resolve(__dirname, 'src/renderer/services'),  // '@services' 指向服务目录
+			'@api': path.resolve(__dirname, 'src/renderer/api'),  // '@api' 指向API目录
+			'@utils': path.resolve(__dirname, 'src/renderer/utils'),  // '@utils' 指向工具函数目录
+			'@redux': path.resolve(__dirname, 'src/renderer/redux'),  // '@redux' 指向Redux相关目录
+			'@styles': path.resolve(__dirname, 'src/renderer/styles'),  // '@styles' 指向样式目录
+			'@configs': path.resolve(__dirname, 'src/renderer/configs'),  // '@configs' 指向配置文件目录
+		},
+		publicPath: "/",  // 静态资源的公共路径
+		plugins: [
+			...whenProd(() => [
+				// 打包时生成压缩包（可以通过解开注释启用）
+				// new BundleAnalyzerPlugin()
+			], [])
+		],
+		configure: (webpackConfig, { env: webpackEnv, paths }) => {
+			webpackConfig.devtool = process.env.NODE_ENV === "development" ? "source-map" : false;  // 开发环境启用source map，生产环境关闭
+			webpackConfig.entry = path.resolve(__dirname, 'src', 'renderer/entry/index.js')  // 设置入口文件路径
+			webpackConfig.resolve.fallback = {
+				"path": false  // 兼容Node.js的path模块API
+			};
+			webpackConfig.ignoreWarnings = [/Failed to parse source map/]  // 忽略source map解析失败的警告
+			webpackConfig.module.rules.push({
+				test: /\.(js|mjs|jsx|svg)$/,  // 匹配JavaScript和SVG文件
+				enforce: "pre",  // 预处理这些文件
+				loader: require.resolve("source-map-loader"),  // 使用source-map-loader加载器
+				resolve: {
+					fullySpecified: false  // 禁用完全指定模块路径
+				}
+			})
+			whenProd(() => {
+				webpackConfig.optimization.minimize = true  // 启用代码压缩
+				webpackConfig.optimization.minimizer.map(plugin => {
+					if (plugin instanceof TerserPlugin) {
+						// 自定义TerserPlugin配置，删除调试信息和console.log
+						Object.assign(plugin.options.minimizer.options.compress, {
+							drop_debugger: true,  // 删除debugger语句
+							drop_console: true,  // 删除所有console语句
+							pure_funcs: ["console.log"]  // 删除console.log
+						})
+					}
+					return plugin
+				})
+				webpackConfig.optimization.runtimeChunk = "single"  // 将运行时代码提取为单个chunk
+				webpackConfig.optimization.splitChunks = {
+					...webpackConfig.optimization.splitChunks,
+					chunks: "all",  // 分割所有的chunk
+					minSize: 30000,  // 最小尺寸，超过该尺寸的chunk会被分割
+					maxAsyncRequests: 30,  // 最大异步请求数
+					maxInitialRequests: 30,  // 最大初始请求数
+					cacheGroups: {
+						defaultVendors: {
+							test: /[\\/]node_modules[\\/]/,  // 分割node_modules中的代码
+							name: "vendors"  // 输出文件名为vendors
+						},
+						antd: {
+							test: /antd/,  // 单独分割antd库
+							name: "antd",
+							priority: 90  // 优先级设为90
+						},
+						echarts: {
+							test: /echarts/,  // 单独分割echarts库
+							name: "echarts",
+							priority: 90  // 优先级设为90
+						},
+						zrender: {
+							test: /zrender/,  // 单独分割zrender库
+							name: "zrender",
+							priority: 90  // 优先级设为90
+						},
+						wangeditor: {
+							test: /@wangeditor/,  // 单独分割wangeditor库
+							name: "@wangeditor",
+							priority: 90  // 优先级设为90
+						},
+						lodash: {
+							test: /lodash/,  // 单独分割lodash库
+							name: "lodash",
+							priority: 90  // 优先级设为90
+						},
+						moment: {
+							test: /moment/,  // 单独分割moment库
+							name: "moment",
+							priority: 90  // 优先级设为90
+						},
+						base: {
+							chunks: "all",  // 分割基础框架
+							test: /(react|react-dom|react-dom-router)/,  // 匹配react相关库
+							name: "base",  // 输出文件名为base
+							priority: 100  // 优先级设为100
+						},
+						commons: {
+							chunks: "all",  // 分割公共模块
+							minChunks: 2,  // 至少两个chunk共享的模块才会被分割到commons组
+							name: "commons",  // 输出文件名为commons
+							priority: 110  // 优先级设为110
+						}
+					}
+				}
+			})
+			return webpackConfig
+		}
+	},
+	babel: {
+		plugins: [
+			...whenProd(
+				() => [
+					["@babel/plugin-proposal-decorators", { legacy: true }]  // 支持装饰器语法
+				],
+				[]
+			)
+		]
+	},
+	plugins: [],
+	eslint: {
+		enable: false  // 禁用ESLint
+	}
+}
+```
+
diff --git a/docs/development/file-system.md b/docs/development/file-system.md
@@ -0,0 +1,50 @@
+# 文件系统
+应用相关的文件系统
+
+## 1、文件路径
+> <font style="color:rgb(28, 30, 33);"> 当前应用程序目录</font>
+>
+
+```plain
+app.getAppPath()
+```
+
+> <font style="color:rgb(28, 30, 33);">当前应用程序全部路径</font>
+>
+
+```plain
+app.getPath(name)
+```
+
+| name名称 | 具体目录 | 备注 |
+| --- | --- | --- |
+| home | 用户的 home 文件夹（主目录） | |
+| appData  | 每个用户的应用程序数据目录，默认情况下指向 | + %APPDATA% Windows 中<br/>+ $XDG_CONFIG_HOME or ~/.config Linux 中<br/>+ ~/Library/Application Support macOS 中 |
+| userData | 储存你应用程序设置文件的文件夹，默认是 appData 文件夹附加应用的名称 | |
+| cache | | |
+| temp | <font style="color:rgb(28, 30, 33);">临时文件夹</font> | |
+| exe  | <font style="color:rgb(28, 30, 33);">当前的可执行文件</font> | |
+| module  | <font style="color:rgb(28, 30, 33);">The </font>libchromiumcontent<font style="color:rgb(28, 30, 33);"> 库</font> | |
+| desktop | <font style="color:rgb(28, 30, 33);">当前用户的桌面文件夹</font> |  |
+| documents<font style="color:rgb(28, 30, 33);"> </font> | <font style="color:rgb(28, 30, 33);">用户文档目录的路径</font> | |
+| downloads<font style="color:rgb(28, 30, 33);"> </font> | <font style="color:rgb(28, 30, 33);">用户下载目录的路径</font> | |
+| music<font style="color:rgb(28, 30, 33);"> </font> | <font style="color:rgb(28, 30, 33);">用户音乐目录的路径</font> | |
+| pictures | <font style="color:rgb(28, 30, 33);">用户图片目录的路径</font> | |
+| videos | <font style="color:rgb(28, 30, 33);">用户视频目录的路径</font> | |
+| recent | <font style="color:rgb(28, 30, 33);"> 用户最近文件的目录 (仅限 Windows)。</font> | |
+| logs | <font style="color:rgb(28, 30, 33);">应用程序的日志文件夹</font> | |
+| crashDumps | <font style="color:rgb(28, 30, 33);">崩溃转储文件存储的目录</font> | |
+
+
+:::info
+<font style="color:rgb(28, 30, 33);">If </font>app.getPath('logs')<font style="color:rgb(28, 30, 33);"> is called without called </font>app.setAppLogsPath()<font style="color:rgb(28, 30, 33);"> being called first, a default log directory will be created equivalent to calling </font>app.setAppLogsPath()<font style="color:rgb(28, 30, 33);"> without a </font>path<font style="color:rgb(28, 30, 33);"> parameter.</font>
+
+:::
+
+## 2、操作文件
+### <font style="color:rgb(28, 30, 33);">1、node.js的文件模块fs</font>
+
+
+### 2、electron 原生的文件操作
+
+
diff --git a/docs/development/main-process.md b/docs/development/main-process.md
@@ -0,0 +1,9 @@
+# 主进程
+
+主进程主要负责 操作electron和node.js相关api.
+
+## 渲染进程相关
+
+main.js 负责操作 electron和node.js相关api
+
+preload.js 预加载文件，负责进程通信，包括单向通信和双向通信，并且 webview和 browserView 和其他进程通信也通过 预加载文件
diff --git a/docs/development/rendering-process.md b/docs/development/rendering-process.md
@@ -4,17 +4,14 @@
 
 ## 渲染进程相关
 
-```
-1、脚手架采用官方cli - create-react-app
-2、状态管理工具为redux 的 react适配版 react-redux 和 @reduxjs/toolkit
-3、异步工具为 redux-saga
-4、数据传递和控制渲染采用 @reduxjs/toolkit 下的 reselect
-5、路由采用 react-router-dom
-6、样式建议采用 styled-components 和 less
-7、开发调试日志采用 redux-logger
-8、项目配置采用 craco
-9、UI库建议 antd，图表 是 echarts
-10、环境变量从 process.env.REACT_APP_ENVIRONMENT 中获取（development - 开发， test - 测试， production - 生产），
+1. 脚手架采用官方cli - create-react-app
+2. 状态管理工具为redux 的 react适配版 react-redux 和 @reduxjs/toolkit
+3. 异步工具为 redux-saga
+4. 数据传递和控制渲染采用 @reduxjs/toolkit 下的 reselect
+5. 路由采用 react-router-dom
+6. 样式建议采用 styled-components 和 less
+7. 开发调试日志采用 redux-logger
+8. 项目配置采用 craco
+9. UI库建议 antd，图表 是 echarts
+10. 环境变量从 process.env.REACT_APP_ENVIRONMENT 中获取（development - 开发， test - 测试， production - 生产），
     主要是 react 的 NODE_ENV无法像vue一样被脚本覆盖
-
-```
diff --git a/docs/getting-started/index.md b/docs/getting-started/index.md
@@ -12,8 +12,7 @@ cd electron-react
 npm i
 npm run start
 
-#从
-
 ```
 
-完成上述步骤后，您应该有一个功能齐全的Electron程序，如下所示：
+完成上述步骤后，您应该有一个功能齐全的Electron程序，如下所示：
+![image](screenshot/electron-react.png)
diff --git a/docs/introduction/index.md b/docs/introduction/index.md
@@ -5,6 +5,3 @@
 该项目的目的，是为了要避免使用 react 手动建立起 electron 应用程序。electron-react 充分利用 creat-react-app 作为脚手架工具，
 加上拥有 creat-react-app 的 webpack, 生产编译即更新的 electron-builder，以及一些最常用的插件，如react-router-dom、redux、redux-saga 等等。
 
-## 在这里查看其他文档
-
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -5,6 +5,3 @@
		该项目的目的，是为了要避免使用 react 手动建立起 electron 应用程序。electron-react 充分利用 creat-react-app 作为脚手架工具，
		加上拥有 creat-react-app 的 webpack, 生产编译即更新的 electron-builder，以及一些最常用的插件，如react-router-dom、redux、redux-saga 等等。

		## 在这里查看其他文档