From d47984cf4fcf9756c542973d95001c6bedd602ad Mon Sep 17 00:00:00 2001
From: alex8088 <244096523@qq.com>
Date: Sat, 20 Aug 2022 20:16:11 +0800
Subject: [PATCH] docs: new official website released

---
 README.md       | 331 ++++++++---------------------------------------
 README.zh-CN.md | 335 ------------------------------------------------
 2 files changed, 56 insertions(+), 610 deletions(-)
 delete mode 100644 README.zh-CN.md

diff --git a/README.md b/README.md
index 41fa155..882f1bf 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,38 @@
-# electron-vite
-
-<p>
-  <img src="https://img.shields.io/badge/node->14.0.0-blue.svg" alt="node" />
-  <img src="https://img.shields.io/badge/vite->2.6.0-747bff.svg" alt="vite" />
+<p align="center">
+  <img src="https://alex8088.github.io/assets/electron-vite.svg" width="150px" height="150px">
 </p>
 
-English | [简体中文](./README.zh-CN.md)
+<div align="center">
+  <h1>electron-vite</h1>
+</div>
+<p align="center">Next generation Electron build tooling based on Vite</p>
 
-> Next generation Electron build tooling based on Vite
+<p align="center">
+<img src="https://img.shields.io/npm/v/electron-vite?color=6988e6&label=version">
+<img src="https://img.shields.io/github/license/alex8088/wx-vue-next?color=blue" alt="license" />
+</p>
 
----
+<p align="center">
+<a href="https://evite.netlify.app/">Documentation</a> |
+<a href="https://evite.netlify.app/guide/">Getting Started</a> |
+<a href="https://github.com/alex8088/quick-start/tree/master/packages/create-electron">create-electron</a>
+</p>
+
+<p align="center">
+<a href="https://cn-evite.netlify.app/">中文文档</a>
+</p>
+
+<br />
+<br />
+<br />
 
 ## Features
 
-- ⚡️Use the same way as [Vite](https://vitejs.dev)
-- 🔨Main process, renderer process and preload script source code are built using Vite
-- 📃Main process, renderer process and preload script Vite configuration combined into one file
-- 📦Preset optimal build configuration
-- 🚀HMR for renderer processes
+- ⚡️ Inherit all the benefits of Vite and use the same way as  [Vite](https://vitejs.dev).
+- 📦The main process, renderers and preload scripts are all built with Vite.
+- 🛠The main process, renderers and preload scripts Vite configuration combined into one file.
+- 💡Pre-configured for Electron, don't worry about configuration.
+- 🚀HMR for renderer processes.
 
 ## Usage
 
@@ -34,14 +49,35 @@ In a project where `electron-vite` is installed, you can use `electron-vite` bin
 ```json
 {
   "scripts": {
-    "start": "electron-vite preview", // start electron app to preview production build
-    "dev": "electron-vite dev", // start dev server and electron app
-    "prebuild": "electron-vite build" // build for production
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev",
+    "prebuild": "electron-vite build"
   }
 }
 ```
 
-In order to use the renderer process HMR, you need to use the `environment variables` to determine whether the window browser loads a local html file or a remote URL.
+### Configuring
+
+When running `electron-vite` from the command line, electron-vite will automatically try to resolve a config file named `electron.vite.config.js` inside project root. The most basic config file looks like this:
+
+```js
+// electron.vite.config.js
+export default {
+  main: {
+    // vite config options
+  },
+  preload: {
+    // vite config options
+  },
+  renderer: {
+    // vite config options
+  }
+}
+```
+
+### Use HMR in Renderer
+
+In order to use the renderer process HMR, you need to use the `environment variables` to determine whether the window browser loads a local html file or a local URL.
 
 ```js
 function createWindow() {
@@ -63,27 +99,7 @@ function createWindow() {
 }
 ```
 
-**Note**: For development, the renderer process `index.html` file needs to reference your script code via `<script type="module">`.
-
-### Recommended project directory
-
-```shell
-├──src
-│  ├──main
-│  │  ├──index.js
-│  │  └──...
-│  ├──preload
-│  │  ├──index.js
-│  │  └──...
-│  └──renderer
-│     ├──src
-│     ├──index.html
-│     └──...
-├──electron.vite.config.js
-└──package.json
-```
-
-### Get started
+### Getting Started
 
 Clone the [electron-vite-boilerplate](https://github.com/alex8088/electron-vite-boilerplate) or use the [create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron) tool to scaffold your project.
 
@@ -91,244 +107,9 @@ Clone the [electron-vite-boilerplate](https://github.com/alex8088/electron-vite-
 npm init @quick-start/electron
 ```
 
-## Configure
+## Contribution
 
-### Config file
-
-When running `electron-vite` from the command line, electron-vite will automatically try to resolve a config file named `electron.vite.config.js` inside project root. The most basic config file looks like this:
-
-```js
-// electron.vite.config.js
-export default {
-  main: {
-    // vite config options
-  },
-  preload: {
-    // vite config options
-  },
-  renderer: {
-    // vite config options
-  }
-}
-```
-
-You can also explicitly specify a config file to use with the `--config` CLI option (resolved relative to `cwd`):
-
-```sh
-electron-vite --config my-config.js
-```
-
-**Tips**: `electron-vite` also supports `ts` or `mjs` config file.
-
-### Config intellisense
-
-Since `electron-vite` ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:
-
-```js
-/**
- * @type {import('electron-vite').UserConfig}
- */
-const config = {
-  // ...
-}
-
-export default config
-```
-
-Alternatively, you can use the `defineConfig` and `defineViteConfig` helper which should provide intellisense without the need for jsdoc annotations:
-
-```js
-import { defineConfig, defineViteConfig } from 'electron-vite'
-
-export default defineConfig({
-  main: {
-    // ...
-  },
-  preload: {
-    // ...
-  },
-  renderer: defineViteConfig(({ command, mode }) => {
-    // conditional config use defineViteConfig
-    // ...
-  })
-})
-```
-
-**Tips**: The `defineViteConfig` exports from `Vite`.
-
-### Config reference
-
-See [vitejs.dev](https://vitejs.dev/config)
-
-### Config presets
-
-#### Build options for `main`:
-
-- **outDir**: `out\main`(relative to project root)
-- **target**: `node*`, automatically match node target of `Electron`. For example, the node target of Electron 17 is `node16.13`
-- **lib.entry**: `src\main\{index|main}.{js|ts|mjs|cjs}`(relative to project root), empty string if not found
-- **lib.formats**: `cjs`
-- **rollupOptions.external**: `electron` and all builtin modules
-
-#### Build options for `preload`:
-
-- **outDir**: `out\preload`(relative to project root)
-- **target**: the same as `main`
-- **lib.entry**: `src\preload\{index|preload}.{js|ts|mjs|cjs}`(relative to project root), empty string if not found
-- **lib.formats**: `cjs`
-- **rollupOptions.external**: the same as `main`
-
-#### Build options for `renderer`:
-
-- **root**: `src\renderer`(relative to project root)
-- **outDir**: `out\renderer`(relative to project root)
-- **target**: `chrome*`, automatically match chrome target of `Electron`. For example, the chrome target of Electron 17 is `chrome98`
-- **lib.entry**: `src\renderer\index.html`(relative to project root), empty string if not found
-- **polyfillModulePreload**: `false`, there is no need to polyfill `Module Preload` for the Electron renderer
-- **rollupOptions.external**: the same as `main`
-
-#### Define option for `main` and `preload`
-
-In web development, Vite will transform `'process.env.'` to `'({}).'`. This is reasonable and correct. But in nodejs development, we sometimes need to use `process.env`, so `electron-vite` will automatically add config define field to redefine global variable replacements like this:
-
-```js
-export default {
-  main: {
-    define: {
-      'process.env': 'process.env'
-    }
-  }
-}
-```
-
-**Note**: If you want to use these configurations in an existing project, please see the Vite plugin [vite-plugin-electron-config](https://github.com/alex8088/vite-plugin-electron-config)
-
-### Config FAQs
-
-#### How do I configure when the Electron app has multiple windows?
-
-When your electron app has multiple windows, it means there are multiple html files or preload files. You can modify your config file like this:
-
-```js
-export default {
-  main: {},
-  preload: {
-    build: {
-      rollupOptions: {
-        input: {
-          browser: resolve(__dirname, 'src/preload/browser.ts'),
-          webview: resolve(__dirname, 'src/preload/webview.ts')
-        }
-      }
-    }
-  },
-  renderer: {
-    build: {
-      rollupOptions: {
-        input: {
-          browser: resolve(__dirname, 'src/renderer/browser.html'),
-          webview: resolve(__dirname, 'src/renderer/webview.html')
-        }
-      }
-    }
-  }
-}
-```
-
-## CLI options
-
-For the full list of CLI options, you can run `npx electron-vite -h` in your project. The flags listed below are only available via the command line interface:
-
-- `--ignoreConfigWarning`: boolean, allow you ignore warning when config missing
-- `--outDir`: string, output directory (default: out)
-
-## API
-
-### build
-
-Type Signature:
-
-```js
-async function build(inlineConfig: InlineConfig = {}): Promise<void>
-```
-
-Example Usage:
-
-```js
-const path = require('path')
-const { build } = require('electron-vite')
-
-;(async () => {
-  await build({
-    build: {
-      outDir: 'out'
-      rollupOptions: {
-        // ...
-      }
-    }
-  })
-})()
-```
-
-### createServer
-
-Type Signature:
-
-```js
-async function createServer(inlineConfig: InlineConfig = {}): Promise<void>
-```
-
-Example Usage:
-
-```js
-const { createServer } = require('electron-vite')
-
-;(async () => {
-  await createServer({
-    server: {
-      port: 1337
-    }
-  })
-})()
-```
-
-### preview
-
-Type Signature:
-
-```js
-async function preview(inlineConfig: InlineConfig = {}): Promise<void>
-```
-
-Example Usage:
-
-```js
-const { preview } = require('electron-vite')
-
-;(async () => {
-  await preview({})
-})()
-```
-
-### InlineConfig
-
-The InlineConfig interface extends Vite [UserConfig](https://vitejs.dev/guide/api-javascript.html#inlineconfig) with additional properties:
-
-- `ignoreConfigWarning`: set to `false` to ignore warning when config missing
-
-And omit `base` property because it is not necessary to set the base public path in Electron.
-
-### resolveConfig
-
-Type Signature:
-
-```js
-async function resolveConfig(
-  inlineConfig: InlineConfig,
-  command: 'build' | 'serve',
-  defaultMode = 'development'
-): Promise<ResolvedConfig>
-```
+See [Contributing Guide](CONTRIBUTING.md).
 
 ## License
 
diff --git a/README.zh-CN.md b/README.zh-CN.md
deleted file mode 100644
index 3aafa10..0000000
--- a/README.zh-CN.md
+++ /dev/null
@@ -1,335 +0,0 @@
-# electron-vite
-
-<p>
-  <img src="https://img.shields.io/badge/node->14.0.0-blue.svg" alt="node" />
-  <img src="https://img.shields.io/badge/vite->2.6.0-747bff.svg" alt="vite" />
-</p>
-
-[English](./README.md) | 简体中文
-
-> 新一代 Electron 开发构建工具
-
----
-
-## 特性
-
-- ⚡️ 使用方式与 [Vite](https://vitejs.dev) 相同
-- 🔨 主进程/渲染进程/ preload 脚本都使用 Vite 构建
-- 📃 统一所有配置，合并到一个文件中
-- 📦 预设构建配置，无需关注配置
-- 🚀 支持渲染进程热更新(HMR)
-
-## 用法
-
-### 安装
-
-```sh
-npm i electron-vite -D
-```
-
-### 开发 & 编译
-
-在安装了 `electron-vite` 的项目中，可以直接使用 `npx electron-vite` 运行， 也可以在 `package.json` 文件中添加 npm scripts ：
-
-```json
-{
-  "scripts": {
-    "start": "electron-vite preview", // 开启 Electron 预览生产构建
-    "dev": "electron-vite dev", // 开启开发服务并启动 Electron 程序
-    "prebuild": "electron-vite build" // 为生产打包构建
-  }
-}
-```
-
-为了使用热更新(HMR)，需要使用环境变量（`ELECTRON_RENDERER_URL`）来决定 Electron 窗口加载本地页面还是远程页面。
-
-```js
-function createWindow() {
-  // 创建窗口
-  const mainWindow = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      preload: path.join(__dirname, '../preload/index.js')
-    }
-  })
-
-  // 开发模式下使用支持HMR的远程地址，生产模式下使用本地html页面
-  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {
-    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
-  } else {
-    mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
-  }
-}
-```
-
-**注意**：在开发中，渲染进程 `index.html` 文件需要通过 `<script type="module">` 引用脚本。
-
-### 推荐项目目录
-
-```shell
-├──src
-│  ├──main
-│  │  ├──index.js
-│  │  └──...
-│  ├──preload
-│  │  ├──index.js
-│  │  └──...
-│  └──renderer
-│     ├──src
-│     ├──index.html
-│     └──...
-├──electron.vite.config.js
-└──package.json
-```
-
-### 开始学习
-
-克隆 [electron-vite-boilerplate](https://github.com/alex8088/electron-vite-boilerplate) 模板或者使用 [create-electron](https://github.com/alex8088/quick-start/tree/master/packages/create-electron) 脚手架来搭建项目学习。
-
-```bash
-npm init @quick-start/electron
-```
-
-## 配置
-
-### 配置文件
-
-当以命令行方式运行 `electron-vite` 时，将会自动尝试解析项目根目录中名为 `electron.vite.config.js` 的配置文件。最基本的配置文件如下所示：
-
-```js
-// electron.vite.config.js
-export default {
-  main: {
-    // vite 配置选项
-  },
-  preload: {
-    // vite 配置选项
-  },
-  renderer: {
-    // vite 配置选项
-  }
-}
-```
-
-你可以显式地通过 `--config` 命令行选项指定一个配置文件（相对于 `cwd` 路径进行解析）：
-
-```sh
-electron-vite --config my-config.js
-```
-
-**提示**：`electron-vite` 也支持 `ts` 或者 `mjs` 的配置文件。
-
-### 配置智能提示
-
-因为 `electron-vite` 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示：
-
-```js
-/**
- * @type {import('electron-vite').UserConfig}
- */
-const config = {
-  // ...
-}
-
-export default config
-```
-
-你还可以使用 `defineConfig` and `defineViteConfig` 工具函数，这样不用 jsdoc 注解也可以获取类型提示：
-
-```js
-import { defineConfig, defineViteConfig } from 'electron-vite'
-
-export default defineConfig({
-  main: {
-    // ...
-  },
-  preload: {
-    // ...
-  },
-  renderer: defineViteConfig(({ command, mode }) => {
-    // 条件配置可使用 defineViteConfig
-    // ...
-  })
-})
-```
-
-**提示**：`defineViteConfig` 从 `Vite` 中导出。
-
-### 配置参考
-
-见 [vitejs.dev](https://vitejs.dev/config)
-
-### 配置预设
-
-#### `主进程`编译项预设：
-
-- **outDir**：`out\main`（相对于根目录）
-- **target**：`node*`，自动匹配 `Electron` 的 `node` 构建目标，如 Electron 17 为 `node16.13`
-- **lib.entry**：`src\main\{index|main}.{js|ts|mjs|cjs}`（相对于根目录），找不到则为空
-- **lib.formats**：`cjs`
-- **rollupOptions.external**：`electron` 和所有内置 node 模块(如果用户配置了外部模块 ID，将自动合并)
-
-#### `preload` 脚本编译项预设：
-
-- **outDir**：`out\preload`（相对于根目录）
-- **target**：同`主进程`
-- **lib.entry**：`src\preload\{index|preload}.{js|ts|mjs|cjs}`（相对于根目录），找不到则为空
-- **lib.formats**：`cjs`
-- **rollupOptions.external**：同`主进程`
-
-#### `渲染进程`编译项预设：
-
-- **root**：`src\renderer`（相对于根目录）
-- **outDir**：`out\renderer`（相对于根目录）
-- **target**：`chrome*`, 自动匹配 `Electron` 的 `chrome` 构建目标，如 Electron 17 为 `chrome98`
-- **lib.entry**：`src\renderer\index.html`（相对于根目录），找不到则为空
-- **polyfillModulePreload**：`false`，不需要为渲染进程 polyfill `Module Preload`
-- **rollupOptions.external**：同`主进程`
-
-#### `主进程`和 `preload` 脚本的 `define` 项设置：
-
-在 Web 开发中，Vite 会将 `'process.env.'` 替换为 `'({}).'`，这是合理和正确的。但在 nodejs 开发中，我们有时候需要使用 `process.env` ，所以 `electron-vite` 重新预设全局变量替换，恢复其使用，预设如下：
-
-```js
-export default {
-  main: {
-    define: {
-      'process.env': 'process.env'
-    }
-  }
-}
-```
-
-**提示**：如果你想在已有的项目中使用这些预设配置，可以使用 Vite 的插件 [vite-plugin-electron-config](https://github.com/alex8088/vite-plugin-electron-config)
-
-### 配置问题
-
-#### 如果 Electron 具有多窗口应该如何配置？
-
-当 Electron 应用程序具有多窗口时，就意味着可能有多个 html 页面和 preload 脚本，你可以像下面一样修改你的配置文件：
-
-```js
-export default {
-  main: {},
-  preload: {
-    build: {
-      rollupOptions: {
-        input: {
-          browser: resolve(__dirname, 'src/preload/browser.ts'),
-          webview: resolve(__dirname, 'src/preload/webview.ts')
-        }
-      }
-    }
-  },
-  renderer: {
-    build: {
-      rollupOptions: {
-        input: {
-          browser: resolve(__dirname, 'src/renderer/browser.html'),
-          webview: resolve(__dirname, 'src/renderer/webview.html')
-        }
-      }
-    }
-  }
-}
-```
-
-## 命令行选项
-
-在项目中，可运行 `npx electron-vite -h` 获得完整的命令行选项列表。下面列出的标志只能通过命令行使用：
-
-- `--ignoreConfigWarning`：boolean，忽略配置缺失警告（如配置文件中移除 preload 配置，不使用 preload 开发时，是有用的）
-- `--outDir`：string，输出路径，相对根目录 (默认：out)
-
-## API
-
-### build
-
-类型：
-
-```js
-async function build(inlineConfig: InlineConfig = {}): Promise<void>
-```
-
-示例：
-
-```js
-const path = require('path')
-const { build } = require('electron-vite')
-
-;(async () => {
-  await build({
-    build: {
-      outDir: 'out'
-      rollupOptions: {
-        // ...
-      }
-    }
-  })
-})()
-```
-
-### createServer
-
-类型：
-
-```js
-async function createServer(inlineConfig: InlineConfig = {}): Promise<void>
-```
-
-示例：
-
-```js
-const { createServer } = require('electron-vite')
-
-;(async () => {
-  await createServer({
-    server: {
-      port: 1337
-    }
-  })
-})()
-```
-
-### preview
-
-类型：
-
-```js
-async function preview(inlineConfig: InlineConfig = {}): Promise<void>
-```
-
-示例：
-
-```js
-const { preview } = require('electron-vite')
-
-;(async () => {
-  await preview({})
-})()
-```
-
-### InlineConfig
-
-`InlineConfig` 接口扩展了 Vite [UserConfig](https://vitejs.dev/guide/api-javascript.html#inlineconfig) 并添加了以下属性：
-
-- `ignoreConfigWarning`：设置为 `false` 来忽略配置缺失警告
-
-同时移除 `base` 属性，因为在 Electron 中没有必要指定公共基础路径。
-
-### resolveConfig
-
-类型：
-
-```js
-async function resolveConfig(
-  inlineConfig: InlineConfig,
-  command: 'build' | 'serve',
-  defaultMode = 'development'
-): Promise<ResolvedConfig>
-```
-
-## License
-
-[MIT](./LICENSE) © alex.wei