From d10b5630ac87ca7d8e8e8b9aa63b3b433261522b 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: Sat, 25 Jun 2022 15:20:01 +0800
Subject: [PATCH] =?UTF-8?q?chor(=F0=9F=8E=AF):=20=20use=20Node.js=20packag?=
 =?UTF-8?q?e=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vite.config.electron.ts | 93 +++++++++++++++++++++++++----------------
 1 file changed, 57 insertions(+), 36 deletions(-)

diff --git a/vite.config.electron.ts b/vite.config.electron.ts
index 81c195b..a41badc 100644
--- a/vite.config.electron.ts
+++ b/vite.config.electron.ts
@@ -4,12 +4,14 @@ import { defineConfig } from 'vite-plugin-electron'
 import resolve, { lib2esm } from 'vite-plugin-resolve'
 import pkg from './package.json'
 
+// @ts-ignore
+const dependencies = Object.keys(pkg.dependencies || {})
+
 const external = [
   'electron',
   ...builtinModules,
-  // @ts-ignore
-  // For use Node.js package in Electron-main, Preload-script
-  ...Object.keys(pkg.dependencies || {}),
+  // (🎯-①): For use Node.js package in Electron-Main, Preload-Script
+  ...dependencies,
 ]
 
 export default defineConfig({
@@ -43,39 +45,58 @@ export default defineConfig({
   },
 })
 
+/**
+ * ## Why?
+ * 
+ * Many times, many people want to use the Node.js package in Electron-Renderer, but it may not work correctly in Vite by default.  
+ * 有很多时候很多人想在 Electron-Renderer 中使用 Node.js 模块，但这在 Vite 可能无法正常的构建。  
+ * 
+ * e.g.  
+ *   Let's use `serialport` as an example.  
+ *   让我们使用 `serialport` 举个例子 🌰。  
+ * 
+ * ```js
+ * // ❌ May not work correctly in Vite by default.
+ * import serialport, { SerialPort, SerialPortMock } from 'serialport';
+ * ```
+ * 
+ * At this time, we need to use `vite-plugin-resolve` to convert `serialport` to ensure that it works normally.  
+ * 这时候我们需要使用 `vite-plugin-resolve` 转换 `serialport`，以确保它能正常工作。  
+ * 
+ * e.g.
+ * 
+ * ```js
+ * // serialport
+ * const _M_ = require('serialport');
+ * const _D_ = _M_.default || _M_;
+ * export { _D_ as default };
+ * export const SerialPort = _M_.SerialPort;
+ * export const SerialPortMock = _M_.SerialPortMock;
+ * ```
+ * 
+ * Try to use again.
+ * 
+ * ```js
+ * // ✅ This looks like nothing has changed, but it works normally after the `vite-plugin-resolve` converted.
+ * import serialport, { SerialPort, SerialPortMock } from 'serialport';
+ * ```
+ * 
+ * 🚧 It should be noted that the Node.js package, as a dependency of the project, should be placed in `dependencies`; Unless you konw how to build them with Vite.  
+ * 需要注意的一点是，Node.js 模块作为项目的依赖，应该放到 `dependencies` 中；除非你知道如何使用 Vite 构建他们。  
+ */
 export function useNodeJsInElectronRenderer() {
-  return resolve(
-    /**
-     * Here you can specify other modules
-     * 🚧 You have to make sure that your module is in `dependencies` and not in the` devDependencies`,
-     *    which will ensure that the electron-builder can package it correctly
-     */
-    {
-      // If you use the following modules, the following configuration will work
-      // What they have in common is that they will return - ESM format code snippets
+  const entries = dependencies.reduce((memo, moduleId) => {
+    const members = Object.keys(require(moduleId))
+    const snippet_of_cjs2esm = lib2esm(
+      // CJS lib name
+      moduleId,
+      // export memebers
+      members,
+      { format: 'cjs' },
+    )
+    return Object.assign(memo, { [moduleId]: snippet_of_cjs2esm })
+  }, {} as Parameters<typeof resolve>[0])
 
-      // ESM format string
-      'electron-store': 'export default require("electron-store");',
-      // Use lib2esm() to easy to convert ESM
-      // Equivalent to
-      /**
-       * sqlite3: () => `
-       * const _M_ = require('sqlite3');
-       * const _D_ = _M_.default || _M_;
-       * export { _D_ as default }
-       * `
-       */
-      sqlite3: lib2esm('sqlite3', { format: 'cjs' }),
-      serialport: lib2esm(
-        // CJS lib name
-        'serialport',
-        // export memebers
-        [
-          'SerialPort',
-          'SerialPortMock',
-        ],
-        { format: 'cjs' },
-      ),
-    }
-  )
+  // (🎯-②): For use Node.js package in Electron-Renderer
+  return resolve(entries)
 }