Merge pull request #56 from electron-vite/dev

Dev

faq/dependencies.md

@@ -4,7 +4,7 @@
 This documentation is limited to building App using [electron-builder](https://www.electron.build/).
 :::
 
-If a third-party npm package can be built normally by [Vite](https://vitejs.dev/), we recommend placing it in `devDependencies`, which will reduce the size of the packaged App.
+If a third-party npm-pkg can be built normally by [Vite](https://vitejs.dev/), we recommend placing it in `devDependencies`, which will reduce the size of the packaged App.
 In some extreme cases, such as when using `C/C++` addons, if we cannot build it correctly, we need to put it in `dependencies` to ensure that the App can work properly after being built.
 
 <details>

guide/core-plugins.md

@@ -2,13 +2,13 @@
 
 ## vite-plugin-electron
 
-[vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) makes the integration of Electron With Vite very easy! Its main purpose is to build the **Main process** and **Preload scripts**, and to start and [hot restart](/guide/features.html#hot-restart) the Electron App when the **Main process** and **Preload scripts** are built.
+[vite-plugin-electron](https://github.com/electron-vite/vite-plugin-electron) makes developing [Electron](https://www.electronjs.org/) Apps as easy as developing normal Web Apps. It can be easily combined with [Vite](https://vitejs.dev/) official templates!
 
-  It also provides a full [JavaScript API](https://github.com/electron-vite/vite-plugin-electron#javascript-api) to make it easy to use anywhere.
+It also provides a full [JavaScript API](https://github.com/electron-vite/vite-plugin-electron#javascript-api) to make it easy to use anywhere.
 
 <details>
   <summary>中文</summary>
-  <p><a target="_blank" href="https://github.com/electron-vite">vite-plugin-electron</a> 使得 Electron 与 Vite 的集成变得十分简单！它的主要作用是构建主进程与预加载脚本，并且当主进程与预加载脚本构建完成时启动、<a href="/guide/features.html#hot-restart">热重启</a> Electron App。</p>
+  <p><a target="_blank" href="https://github.com/electron-vite/vite-plugin-electron">vite-plugin-electron</a> 使得你开发 <a target="_blank" href="https://www.electronjs.org/">Electron</a> 应用像开发正常的 Web 应用那样简单，它可以非常简单与 <a target="_blank" href="https://vitejs.dev/">Vite</a> 官方的模板结合！</p>
   <p>除此之外它还提供全量的 <a target="_blank" href="https://github.com/electron-vite/vite-plugin-electron#javascript-api">JavaScript API</a> 可以很方便的在任何地方使用它。</p>
 </details>
 
@@ -179,18 +179,25 @@ export default {
 
 ## vite-plugin-electron-renderer
 
-[vite-plugin-electron-renderer](https://github.com/electron-vite/vite-plugin-electron-renderer) makes it possible to support building Electron **Renderer process** by modifying some of the necessary Vite default configs.
+[vite-plugin-electron-renderer](https://github.com/electron-vite/vite-plugin-electron-renderer) does three things:
 
-In addition it allows some npm packages developed specifically for Node.js, especially C/C++ native modules, to be built properly by Vite to be available to the **Renderer process**.
+1. Modify some Vite default configurations to adapt to the build **Renderer process**.
+2. Polyfilling the Electron and Node.js built-in modules.
+3. Support third-party npm-pkg loading by custom [Pre-bundling](/guide/dependency-pre-bundling), especially `C/C++` addons.
 
 ::: tip Note
 Please make sure you enabled `nodeIntegration: true` in the **Main process**.
 :::
 
 <details>
   <summary>中文</summary>
-  <p><a target="_blank" href="https://github.com/electron-vite/vite-plugin-electron-renderer">vite-plugin-electron-renderer</a> 通过修改一些必要的 Vite 的默认配置使其能够支持构建 Electron 渲染进程。</p>
-  <p>此外它使得一些专门为 Node.js 开发的 npm 包尤其是 C/C++ 本地模块，可以被 Vite 正确构建以提供给渲染进程使用。</p>
+  <p><a target="_blank" href="https://github.com/electron-vite/vite-plugin-electron-renderer">vite-plugin-electron-renderer</a> 做了三件事：</p>
+  <ol>
+  <li>修改一些 Vite 默认的配置以适配构建<strong>渲染进程</strong>。</li>
+  <li>填充 Electron 和 Node.js 模块。</li>
+  <li>通过自定义<a href="/guide/dependency-pre-bundling">预构建</a>支持第三方 npm 包加载，尤其是 <code>C/C++</code> 扩展。</li>
+  </ol>
+  <p><strong>注意</strong>：请确保你在<strong>主进程</strong>中启用了 <code>nodeIntegration: true</code></p>
 </details>
 
 ### Basic Usage
@@ -205,13 +212,13 @@ export default {
     electron({
       entry: 'electron/main.ts',
     }),
-    // Use Node.js and Electron in Renderer process
+    // Use Electron and Node.js built-in modules in Renderer process
     renderer(),
   ],
 }
 ```
 
-### Node.js And Electron API
+### Electron and Node.js API
 
 ```ts
 // In a Renderer process file
@@ -252,14 +259,14 @@ ipcRenderer.send('foo', 'arg1')
 ┗————————————————————————————————————————┛         ┗—————————————————┛
 ```
 
-### Load third-party modules
+### Load third-party npm-pkg
 
 In most cases a Node.js npm-pkg written in pure JavaScript can be used directly in the Renderer process. If it is a `C/C++` addon or `ESModule` format package, it needs to be [pre-bundle](https://vitejs.dev/guide/dep-pre-bundling.html) before it can work.
 
-See the [👉 Dependency Pre-Bundling](/guide/dependency-pre-bundling.html) section for details.
+See the [👉 Dependency Pre-Bundling](/guide/dependency-pre-bundling) section for details.
 
 <details>
   <summary>中文</summary>
   <p>多数情况下一个纯 JavaScript 编写的 Node.js npm 包是可以直接在渲染进程中使用的。如果它是 <code>C/C++</code> 扩展，或者 <code>ESModule</code> 格式包，那么需要将它<a target="_blank" href="https://vitejs.dev/guide/dep-pre-bundling.html">预构建</a>后才可以工作。</p>
-  <p>详情请看 <a href="/guide/dependency-pre-bundling.html">👉 Dependency Pre-Bundling</a> 部分。</p>
+  <p>详情请看 <a href="/guide/dependency-pre-bundling">👉 Dependency Pre-Bundling</a> 部分。</p>
 </details>

guide/dependency-pre-bundling.md

@@ -1,6 +1,6 @@
 # Dependency Pre-Bundling
 
-In general. Vite's [pre-bundle](https://vitejs.dev/guide/dep-pre-bundling.html) all third-party modules into Web format, but it doesn't fully work with the Electron Renderer process, especially the `C/C++` modules. For this purpose [vite-plugin-electron-renderer](https://github.com/electron-vite/vite-plugin-electron-renderer) provides [Pre-Bundling](https://github.com/electron-vite/vite-plugin-electron-renderer#dependency-pre-bundling) adapted to the Electron Renderer process.
+In general. Vite's [pre-bundle](https://vitejs.dev/guide/dep-pre-bundling.html) all third-party npm-pkg into Web format, but it doesn't fully work with the Electron Renderer process, especially the `C/C++` addons. For this purpose [vite-plugin-electron-renderer](https://github.com/electron-vite/vite-plugin-electron-renderer) provides [Pre-Bundling](https://github.com/electron-vite/vite-plugin-electron-renderer#dependency-pre-bundling) adapted to the Electron Renderer process.
 
 <details>
   <summary>中文</summary>

guide/examples.md

@@ -1,6 +1,6 @@
 # Examples
 
-**[👉 electron-vite-samples](https://github.com/caoxiemeihao/electron-vite-samples)** maintains a lot of boilerplate samples, it includes the really confusing `C/C++` modules like [better-sqlite3](https://www.npmjs.com/package/better-sqlite3), [sqlite3](https://www.npmjs.com/package/sqlite3), [serialport](https://www.npmjs.com/package/serialport). There are also npm packages in `esmodule` format, like [node-fetch](https://www.npmjs.com/package/node-fetch), [got](https://www.npmjs.com/package/got) etc.
+**[👉 electron-vite-samples](https://github.com/caoxiemeihao/electron-vite-samples)** maintains a lot of boilerplate samples, it includes the really confusing `C/C++` addons like [better-sqlite3](https://www.npmjs.com/package/better-sqlite3), [sqlite3](https://www.npmjs.com/package/sqlite3), [serialport](https://www.npmjs.com/package/serialport). There are also npm-pkg in `esmodule` format, like [node-fetch](https://www.npmjs.com/package/node-fetch), [got](https://www.npmjs.com/package/got) etc.
 
 This is really helpful for someone who is new to [Electron⚡️Vite](https://github.com/electron-vite).