caoxiemeihao / electron-vite-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

201.0 4.0 28.0 6.8 MB

📚 Really simple Electron + Vite boilerplate.

License: MIT License

TypeScript 73.89% HTML 4.89% CSS 21.22%

electron vite esbuild sqlite3 serialport boilerplate webpack

electron-vite-boilerplate's Introduction

electron-vite-boilerplate

🥳 Really simple Electron + Vite boilerplate.

Features

📦 Out of the box
🚀 Quick Start of vite-plugin-electron
🎯 Based on the official template-vanilla-ts, less invasive

Run Setup

# clone the project
git clone https://github.com/electron-vite/electron-vite-boilerplate.git

# enter the project directory
cd electron-vite-boilerplate

# install dependency
npm install

# develop
npm run dev

Be aware

🚨 By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. Because it will modify the default config of Vite.

# vite.config.ts

electron({
- renderer: {}
})

FAQ

dependencies vs devDependencies
Using C/C++ native addons in Electron-Renderer
Node.js ESM packages (e.g. execa node-fetch)

🍵 🍰 🍣 🍟

electron-vite-boilerplate's People

Contributors

Stargazers

Watchers

electron-vite-boilerplate's Issues

serialport版本已经是10.3.0,已经自带类型且不支持默认导出,请问vite-plugin-electron-renderer中应该怎么写,

serialport更改
https://serialport.io/docs/guide-upgrade

[Help] 如何设置环境变量?

[Help] 如何设置环境变量呢?

如：process.env.TEST

[Bug] ESM Support: 最新版本的electron-vite-vue里，使用esm模块报错，require() of ES Module ... not supported.

在最新的electron-vite-vue里，使用ESM模块报错。我已经添加了vite-plugin-esmodule依赖，版本号为1.3.2；并在dependencies中添加了如下ESM模块依赖

  "dependencies": {
    "execa": "^6.1.0",
    "file-type": "^17.1.1",
    "move-file": "^3.0.0",
    "node-fetch": "^3.2.4"
  },

并在vite.config.ts中添加了如下代码块

    esmodule([
      'execa',
      'node-fetch',
      'file-type',
      'move-file',
    ]),

编译时提示esm编译成功

但是在运行时提示require() of ES Module ... not supported.

[⚡️ Vite] Error [ERR_REQUIRE_ESM]: require() of ES Module E:\FrontendProjects\MeiTuanAdmin\node_modules\execa\index.js from E:\FrontendProjects\MeiTuanAdmin\dist\electron\main\index.js not supported.
[⚡️ Vite] Instead change the require of E:\FrontendProjects\MeiTuanAdmin\node_modules\execa\index.js in E:\FrontendProjects\MeiTuanAdmin\dist\electron\main\index.js to a dynamic import() which is available in all CommonJS modulees.
[⚡️ Vite]     at c._load (node:electron/js2c/asar_bundle:5:13343)
[⚡️ Vite]     at Module.<anonymous> (E:\FrontendProjects\MeiTuanAdmin\dist\electron\main\index.js:8:13)
[⚡️ Vite]     at c._load (node:electron/js2c/asar_bundle:5:13343)
[⚡️ Vite]     at loadApplicationPackage (E:\FrontendProjects\MeiTuanAdmin\node_modules\electron\dist\resources\default_app.asar\main.js:110:16)
[⚡️ Vite]     at Object.<anonymous> (E:\FrontendProjects\MeiTuanAdmin\node_modules\electron\dist\resources\default_app.asar\main.js:222:9)
[⚡️ Vite]     at c._load (node:electron/js2c/asar_bundle:5:13343)
[⚡️ Vite]     at Object.<anonymous> (node:electron/js2c/browser_init:185:3104)
[⚡️ Vite]     at ./lib/browser/init.ts (node:electron/js2c/browser_init:185:3308)
[⚡️ Vite]     at __webpack_require__ (node:electron/js2c/browser_init:1:128)
[⚡️ Vite]     at node:electron/js2c/browser_init:1:1200
[⚡️ Vite]     at node:electron/js2c/browser_init:1:1267
[⚡️ Vite]     at c._load (node:electron/js2c/asar_bundle:5:13343)

运行报错截图

另外我注意到electron-vite-boilerplate示例项目删除了对ESM模块使用的演示，现在应该如何正确在electron-vite-vue中使用ESM模块呢

systemPreferences support

Hi, i'm new in electron, is there any way to get the import { systemPreferences } from 'electron' and use this function in a vue component?

[Help] The task `start.debug.script.mjs`cannot be tracked. Make sure to have a problem matcher defined.

Describe the problem you confuse

这个仓库我看到有 script ，所以我尝试用这个在 vscode 中 debug，但是提示 The task 'start.debug.script.mjs' cannot be tracked. Make sure to have a problem matcher defined.

但是成功显示了 electron 界面如图所示：

看起来和 readme 的图片一致。

这里我选择了 Debug Anyway，会让 electron 窗口再出现相同的一个。

我不确定这是否正常，应该默认选择什么选项吗？或者应该设置什么去解决这个弹窗吗？

[Help] Cannot write file 'xxxx/electron-vite-boilerplate/dist/main/index.cjs' because it would overwrite input file.

Describe the problem you confuse

我使用 VSCode 的时候，在 tsconfig.json 文件中会有提示错误。

Cannot write file 'xxxx/electron-vite-boilerplate/dist/main/index.cjs' because it would overwrite input file. #ts [Ln 1, Col 1]

我尝试查找了一下原因，找到了这个说法：当我使用 javascript 文件时，为什么我会得到 error ts5055 cannot write file xxx js because it would overwrite input file 错误？

对于 TypeScript 文件来说，在默认情况下，编译器将在同一目录中生成与 JavaScript 相同文件名的文件。因为 TypeScript 文件与编译后的文件总是拥有不同的后缀，这么做是安全的。然而，如果你设置 allowJs 编译选项为 true 和没有设置任何的编译输出属性（outFile 和 outDir），编译器将会尝试使用相同的规则来编译文件，这将导致发出的 JavaScript 文件与源文件具有相同的文件名。为了避免意外覆盖源文件，编译器将会发出此警告，并跳过编写输出文件。

有多种方法可以解决此问题，但所有这些方法都涉及配置编译器选项，因此建议你在项目根目录中的 tsconfig.json 文件来启用此功能。如果你不想编译 JavaScript 文件，你只需要将 allowJs 选项设置为 false；如果你确实想要包含和编译这些 JavaScript 文件，你应该设置 outDir 或者 outFile 选项，定向到其他位置，这样他们就不会与源文件冲突。如果你仅仅是想包含这些 JavaScript 文件，但是不需要编译，设置 noEmit 选项为 true 可以跳过编译检查。

可以看出，样版中的 tsconfig.json 将 allowJs 选项设置为 true ，但是没有设置 outDir 或者 outFile 选项，造成了这个报错，但是我不太了解这里应该怎么指定不同的编译路径以避免这个问题。

Sharing types between main and renderer

With this set up, is it possible to share type between main and renderer folder?

剔除 tsx 只保留最简单的 App.vue HelloWorld.vue，build 后启动时报错

环境

操作系统：win10
IDE：vscode

操作

下载 electron-vue-vite-webpack
执行命令： yarn
删除登录、App.tsx 、路由等，使 App.vue 作为首页展示组件 HelloWorld.vue
执行命令：yarn run build

结果

开发环境下能够正常渲染并且正常展示 HelloWorld.vue，但 build 后启动构建好的 exe 控制台报错：

Uncaught TypeError: Cannot read property 'render' of undefined
    at Object.app.mount (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:1337)
    at eval (webpack-internal:///./src/render/main.ts:21)
    at Object../src/render/main.ts (main.0028487d3.js:59)
    at __webpack_require__ (main.0028487d3.js:222)
    at main.0028487d3.js:306
    at main.0028487d3.js:308

期望

如果仅使用 vue3 开发，不使用 jsx 语法，期望能够正确构建，暂时不清楚哪里导致的错误

求助打包时svg-sprite-loader问题

使用了svg-sprite-loader在webpack打包，svg图标没了....
配置如下
{
test: /.svg$/,
loader: "svg-sprite-loader",
// include: [resolveRoot("src/render/assets/svg")],
options: {
symbolId: "icon-[name]",
},
},

caoxiemeihao / electron-vite-boilerplate Goto Github PK

electron-vite-boilerplate's Introduction

electron-vite-boilerplate

Features

Run Setup

Directory

Be aware

FAQ

🍵 🍰 🍣 🍟

electron-vite-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

electron-vite-boilerplate's Issues

在最新的electron-vite-vue里，使用ESM模块报错。我已经添加了vite-plugin-esmodule依赖，版本号为1.3.2；并在dependencies中添加了如下ESM模块依赖

并在vite.config.ts中添加了如下代码块

编译时提示esm编译成功

但是在运行时提示require() of ES Module ... not supported.

运行报错截图

另外我注意到electron-vite-boilerplate示例项目删除了对ESM模块使用的演示，现在应该如何正确在electron-vite-vue中使用ESM模块呢

Describe the problem you confuse

Describe the problem you confuse

环境

操作

结果

期望

Recommend Projects

Recommend Topics

Recommend Org