add esm options

jctaoo · Aug 26, 2024 · a14924b · a14924b
1 parent c6e6a4d
commit a14924b
Show file tree

Hide file tree

Showing 15 changed files with 943 additions and 690 deletions.
diff --git a/README.md b/README.md
@@ -1,26 +1,16 @@
-<div align="center">
-  <img src="./new-docs/static/img/logo.svg" width="150" height="150"/>
-  <p>
-    <strong>elecrun</strong> is a tool to run your electron app easily.
-  </p>
-  <p>
-    <a href="https://github.com/jctaoo/electron-run/actions/workflows/CI.yml">
-      <img src="https://github.com/jctaoo/elecrun/actions/workflows/CI.yml/badge.svg"/>
-    </a>
-  </p>
-</div>
-
-[中文文档](./README_CN.md)
+**electron-run** is a tool to run your electron app easily.
+
+[![CI](https://github.com/jctaoo/electron-run/actions/workflows/CI.yml/badge.svg)](https://github.com/jctaoo/electron-run/actions/workflows/CI.yml)
 
 ## Features
 
 - Write modern JavaScript, [TypeScript](https://www.typescriptlang.org/) in [Node.js](https://nodejs.org/en/) with no config.
 
 - Let [Electron](https://www.electronjs.org/) work with any front-end framework.
 
-- Using [Esbuild](https://esbuild.github.io/) to transform your main process code, It's very fast ⚡️.
+- Using [esbuild](https://esbuild.github.io/) to transform your main process code, It's very fast ⚡️.
 
-- Using [Vite](https://vitejs.dev/) in renderer process.
+- Using [vite](https://vitejs.dev/) in renderer process.
 
 ## Quick Start
 
@@ -114,7 +104,7 @@ index.html
 yarn dev
 ```
 
-<center> <br><img width="500px" src="docs/images/screen-shot.webp"> <br> <div style="color:orange; border-bottom: 1px solid #d9d9d9; display: inline-block; color: #999; padding: 2px;">screen shot</div> <br></center>
+<center> <br><img width="500px" src="images/screen-shot.webp"> <br> <div style="color:orange; border-bottom: 1px solid #d9d9d9; display: inline-block; color: #999; padding: 2px;">screen shot</div> <br></center>
 
 #### Source codes
 
@@ -141,7 +131,7 @@ For more information, see [vite official website](https://vitejs.dev)
 
 When you run `elecrun dev`, `electron-run` will try to find and read entry file(You can specify the entry file path, see [development phase](#development-phase)) then statically analyze to transform your code. After that, save the target code to your `node_modules/.electron-run` (there is one exception, see [options --preload](#options---preload-file)). Finally, `electron-run` will execute `electron` command line tool to start your app.
 
-When your main process code has been changed, `electron-run` will ask if you want to rerun your app. This is useful when you don't want to interrupt the current debugging.
+When your main process code has been changed, `electron-run` will ask if you want to rerun your app. This is useful when you don’t want to interrupt the current debugging.
 
 ## Guide
 
@@ -151,7 +141,7 @@ run
 
 ```shell
 elecrun dev --vite
-# or
+# or 
 elecrun --vite
 ```
 
@@ -213,10 +203,11 @@ elecrun --vite --preload preload.ts
 
 `dev` command save the build artifact to `node_modules/.electron-run/app` under your project by default. But sometimes you want to clean these files. This options help you clean cache files when you run `dev` command.
 
-#### option `--esbuild-config-file`
+#### options `--esm`
+
+The `--esm` option is used to specify whether to use ESM modules to run the main process code. By default, `electron-run` uses `commonjs` modules to run the main process code. If you want to use ESM modules, just add this option.
 
-`dev` or `build` command to specify a custom esbuild configuration file relative to the project root- the default
-export from this file will be merged into the esbuild build options.
+> Some third-party libraries only support `esm` modules. When using such third-party libraries, you may need to add this option.
 
 ### build phase
 

diff --git a/README_CN.md b/README_CN.md
@@ -1,26 +1,16 @@
-<div align="center">
-  <img src="./new-docs/static/img/logo.svg" width="150" height="150"/>
-  <p>
-    一个简简单单的工具: 你负责代码, <strong>elecrun</strong> 负责 electron
-  </p>
-  <p>
-    <a href="https://github.com/jctaoo/electron-run/actions/workflows/CI.yml">
-      <img src="https://github.com/jctaoo/elecrun/actions/workflows/CI.yml/badge.svg"/>
-    </a>
-  </p>
-</div>
+**electron-run** 是一个简单快速地运行你的 electron app 的工具。
 
-[English Docs](./README.md)
+[![CI](https://github.com/jctaoo/electron-run/actions/workflows/CI.yml/badge.svg)](https://github.com/jctaoo/electron-run/actions/workflows/CI.yml)
 
-## 为什么使用?
+## 特征
 
-- 现在你可以直接在 Electron 中使用 JavaScript 和 [TypeScript](https://www.typescriptlang.org/), 不用配置
+- 在 [Node.js](https://nodejs.org/zh-cn/) 里编写 JavaScript, [TypeScript](https://www.typescriptlang.org/) 而不需要任何配置
 
-- 在主进程中使用 [esbuild](https://esbuild.github.io/), 非常快 ⚡️
-
-- 在渲染进程中使用 [vite](https://cn.vitejs.dev/), 非常快 ⚡️
+- 让 [Electron](https://www.electronjs.org/) 与任何前端框架一起工作
 
-- 顺带一提, elecrun 支持任何前端框架
+- 使用 [esbuild](https://esbuild.github.io/) 转换主进程代码,非常快 ⚡️
+
+- 在渲染进程中使用 [vite](https://cn.vitejs.dev/)
 
 ## 快速开始
 
@@ -41,12 +31,12 @@ yarn global add electron-run
 # using npm
 npm install electron-run --save-dev
 # using yarn
-yarn add electron-run --dev
+yarn global add electron-run --dev
 ```
 
 ### 创建并运行 Electron 应用
 
-#### 开始一个全新的项目
+#### 开始一个新的项目
 
 ```shell
 # 创建项目目录
@@ -106,6 +96,8 @@ index.html
 }
 ```
 
+> `elecrun` 是 `electron-run` 的别名
+
 #### ⚡️ 开始运行您的 Electron 程序
 
 ```shell
@@ -119,7 +111,7 @@ yarn dev
 - https://github.com/jctaoo/electron-run/tree/main/fixtures/demo
 - https://github.com/jctaoo/electron-run/tree/main/fixtures/simple
 
-## 它是如何工作的
+## 工作原理
 
 ### 渲染进程
 
@@ -209,10 +201,13 @@ elecrun --vite --preload preload.ts
 
 `dev` 命令会存一些打包产物在 `node_modules/.electron-run/app` 下, 这条命令帮助你在开始 `dev` 前清除掉这些缓存.
 
-#### 选项 `--esbuild-config-file`
+#### 选项 `--esm`
 
-运行在使用 `dev` 和 `build` 命令时自定义 esbuild 配置文件, 使用相对路径来置顶. 值得一提的事, 你的自定义配置将会和 elecrun 自己的 esbuild 配置合并, 并且自定义的配置优先级较高.
+`--esm` 选项用于指定是否使用 ESM 模块来运行主进程代码. 默认情况下, `electron-run` 会使用 `commonjs` 模块来运行主进程代码. 如果您想使用 ESM 模块, 只需添加该选项即可.
 
+> 有一些第三方库仅仅支持 `esm` 模块, 使用这样的第三方库时, 您可能需要添加该选项.
+
+```shell
 
 ### 编译阶段
 

diff --git a/docs/README.md b/docs/README.md
@@ -203,6 +203,12 @@ elecrun --vite --preload preload.ts
 
 `dev` command save the build artifact to `node_modules/.electron-run/app` under your project by default. But sometimes you want to clean these files. This options help you clean cache files when you run `dev` command.
 
+#### options `--esm`
+
+The `--esm` option is used to specify whether to use ESM modules to run the main process code. By default, `electron-run` uses `commonjs` modules to run the main process code. If you want to use ESM modules, just add this option.
+
+> Some third-party libraries only support `esm` modules. When using such third-party libraries, you may need to add this option.
+
 ### build phase
 
 The build phase is almost the same as the development phase (also including all the options and arguments except `--vite`). The difference is that the compiled files are stored in `node_modules` in the development phase, while the build phase is stored in the app directory.

diff --git a/docs/index.html b/docs/index.html
@@ -13,9 +13,9 @@
       :root {
           --navbar-bg: #3e2e98;
           --navlink-hover-bg: #28127e;
-          --sidebar-bg: #f0f4ff;
+          /* --sidebar-bg: #f0f4ff; */
           --sidebar-menu-item-active-fg: #bd1e68;
-          --code-span-bg: #ffecfc;
+          /* --code-span-bg: #ffecfc; */
           --content-link-fg: #bd1e68;
           --code-block-bg: #302b38;
       }

diff --git a/docs/zh.html b/docs/zh.html
@@ -13,9 +13,9 @@
       :root {
           --navbar-bg: #3e2e98;
           --navlink-hover-bg: #28127e;
-          --sidebar-bg: #f0f4ff;
+          /* --sidebar-bg: #f0f4ff; */
           --sidebar-menu-item-active-fg: #bd1e68;
-          --code-span-bg: #ffecfc;
+          /* --code-span-bg: #ffecfc; */
           --content-link-fg: #bd1e68;
           --code-block-bg: #302b38;
       }

diff --git a/docs/zh.html.md b/docs/zh.html.md
@@ -36,7 +36,7 @@ yarn global add electron-run --dev
 
 ### 创建并运行 Electron 应用
 
-#### 开始一个新等项目
+#### 开始一个新的项目
 
 ```shell
 # 创建项目目录
@@ -111,7 +111,7 @@ yarn dev
 - https://github.com/jctaoo/electron-run/tree/main/fixtures/demo
 - https://github.com/jctaoo/electron-run/tree/main/fixtures/simple
 
-## 它是如何工作的
+## 工作原理
 
 ### 渲染进程
 
@@ -199,7 +199,15 @@ elecrun --vite --preload preload.ts
 
 #### 选项 `--clean-cache`
 
-`dev` command save the build artifacts to `node_modules/.electron-run/app` under your project by default. But sometimes you want to clean these files. This options help you clean cache files when you run `dev` command.
+`dev` 命令会存一些打包产物在 `node_modules/.electron-run/app` 下, 这条命令帮助你在开始 `dev` 前清除掉这些缓存.
+
+#### 选项 `--esm`
+
+`--esm` 选项用于指定是否使用 ESM 模块来运行主进程代码. 默认情况下, `electron-run` 会使用 `commonjs` 模块来运行主进程代码. 如果您想使用 ESM 模块, 只需添加该选项即可.
+
+> 有一些第三方库仅仅支持 `esm` 模块, 使用这样的第三方库时, 您可能需要添加该选项.
+
+```shell
 
 ### 编译阶段
 

diff --git a/fixtures/demo/package.json b/fixtures/demo/package.json
@@ -10,11 +10,11 @@
     "clean": "elecrun clean"
   },
   "devDependencies": {
+    "@types/node": "^22.5.0",
     "vite": "^2.1.5"
   },
   "dependencies": {
-    "@types/node": "^14.14.37",
-    "electron": "^12.0.2",
+    "electron": "^32.0.1",
     "electron-run": "file:../../"
   }
 }