From 545e4159f594e09b1602850e731001f57e6eb316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com>
Date: Mon, 31 Jan 2022 12:49:04 +0800
Subject: [PATCH] docs: update

---
 README.md       | 49 +++++++++++++++++++++++++++++++++++++++++--------
 README.zh-CN.md |  8 +++-----
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/README.md b/README.md
index dec51d2..eaa434d 100644
--- a/README.md
+++ b/README.md
@@ -9,15 +9,11 @@
 
 ## Overview
 
-- All config files `Main-process`, `Renderer-process` and `Preload-script` they are in `configs/*.ts`.
+- Very simple Vite, React, Electron integration template.
 
-- All files are built using `Vite`, is supper fast.
+- Contains only the basic dependencies.
 
-- `scripts/build.mjs` just calls the `Vite` API and uses the `configs/*.ts` config file to build.
-
-- The difference between `scripts/watch.mjs` and `build.mjs` is that the watch option is configured for the Main-process and Preload-script. The Renderer-process uses `require ('vite').createServer`
-
-- Manage projects more through configuration other than scripts. -- **🥳 Simple and clearly**
+- The extend is very flexible.
 
 ## Run Setup
 
@@ -61,7 +57,7 @@ Once `dev` or `build` npm-script executed will be generate named `dist` folder.
 
 ## Use Electron, NodeJs API
 
-> 🚧 By default, Electron don't support the use of API related to Electron and NoeJs in the Renderer-process, but someone still need to use it. If so, you can see the 👉 npm-package **[vitejs-plugin-electron](https://www.npmjs.com/package/vitejs-plugin-electron)** or another template **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
+> 🚧 By default, Electron don't support the use of API related to Electron and NodeJs in the Renderer-process, but someone still need to use it. If so, you can see the template 👉 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
 
 #### All Electron, NodeJs API invoke passed `Preload-script`
 
@@ -94,6 +90,43 @@ Once `dev` or `build` npm-script executed will be generate named `dist` folder.
   console.log('ipcRenderer', window.ipcRenderer)
   ```
 
+## Use SerialPort, SQLite3 or other node-native addons in Main-process
+
+- First, yout need to make sure the deps in "dependencies". Because the project still needs it after packaged.
+
+- Main-process, Preload-script are also built with Vite, and they are just built as [build.lib](https://vitejs.dev/config/#build-lib).  
+So they just need to configure Rollup.
+
+**Click to view more** 👉 [scripts/vite.config.mjs](https://github.com/caoxiemeihao/electron-vue-vite/blob/main/scripts/vite.config.mjs)
+
+```js
+export default {
+  build: {
+    // built lib for Main-process, Preload-script
+    lib: {
+      entry: 'index.ts',
+      formats: ['cjs'],
+      fileName: () => '[name].js',
+    },
+    rollupOptions: {
+      // configuration here
+      external: [
+        'serialport',
+        'sqlite3',
+      ],
+    },
+  },
+}
+```
+
+## `dependencies` vs `devDependencies`
+
+- First, you need to know if deps(npm package) are still needed after packaged.
+
+- Like [serialport](https://www.npmjs.com/package/serialport), [sqlite3](https://www.npmjs.com/package/sqlite3) they are node-native module and should be placed in `dependencies`. In addition, Vite will not build them, but treat them as external modules.
+
+- Like [vue](https://www.npmjs.com/package/vue), [react](https://www.npmjs.com/package/react) they are pure javascript module and can be built with Vite, so they can be placed in `devDependencies`. This reduces the volume of the built project.
+
 ## Shown
 
 <img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
diff --git a/README.zh-CN.md b/README.zh-CN.md
index ac3789d..a4b1f5b 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -9,13 +9,11 @@
 
 ## 概述
 
-- 主进程(main-process)、渲染进程(renderer-process)、预加载脚本(preload-script) 全部在 `configs/xxx.ts` 中配置 -- 全量级的 `Vite` 编译还是相当快的
+- 十分简单的 Vite, React, Electron 整合模板
 
-- `scripts/build.mjs` 只是调用了 `Vite` 的 API 并使用 `configs/xxx.ts` 配置文件进行构建
+- 只包含最基本的依赖
 
-- `scripts/watch.mjs` 与 `build.mjs` 区别是 主进程(main-process)、预加载脚本(preload-script) 配置了 `watch` 选项；渲染进程则是使用了 `require('vite').createServer`
-
-- 项目整体趋于 配置化 而不是大量的脚本让人眼花缭乱 -- **上手简单**
+- 扩展十分灵活
 
 ## 运行