electron + react + react-router + mobx + webpack 搭建脚手架工程

最新推荐文章于 2024-07-05 16:41:23 发布
最新推荐文章于 2024-07-05 16:41:23 发布
阅读量407 收藏
点赞数
文章标签： javascript webpack ViewUI
原文链接：https://segmentfault.com/a/1190000017130833
版权

项目地址 ： https://github.com/ConardLi/electron-react

electron-react

electron + react + react-router + mobx + webpack 搭建的脚手架工程

像开发react web项目一样开发electron

image

项目路径与命名

main  //主进程
    menu  //菜单
render  //渲染进程
    component  //组件
    config  //配置
    public  //静态资源
    routes  //路由
    service  //服务
    utils  //工具类
    view  //页面
scripts  //打包脚本
main_process  //主进程打包目录
render_process   //渲染进程打包目录
dist    //客户端打包目录
resources  //图标资源

使用

本地调试

npm install
npm start

本地测试打包

npm run compile

打包客户端

npm run pack-win
npm run pack-mac

解决了什么问题

1.electron+react框架搭建

主进程代码使用babel编译，渲染进程使用webpack打包,快速开始开发。

2.调试

集成环境选择模块，简单分离开发，测试，线上环境。

image

3.程序保护

开机自启

托盘最小化

崩溃监控

4.升级

一行代码接入升级平台，实现客户端升级功能

5.打包构建

一个指令搞定打包

npm run pack-win
npm run pack-mac

项目地址 ： https://github.com/ConardLi/electron-react

weixin_34109408
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
electron结合JAVAweb_【原创】从零开始搭建Electron+Vue+Webpack项目框架（五）预加载和Electron自动更新...
weixin_34887818的博客
01-12 410
导航：摘要：到目前为止，我们的项目已经具备了PC客户端该有的一些基础功能和调试环境，但是总感觉缺了灵魂，那就是结合实际项目、实际业务的细节处理，缺着吧。。。这篇文章就介绍一下预加载和自动更新，文字功底有限，如有介绍的不清楚的地方，欢迎留言指正，或者跳过文字，直接去看代码，项目完整代码：https://github.com/luohao8023/electron-vue-template，随博客更新...
react-router-dom使用electron的坑
weixin_46030510的博客
11-16 953
electron 打包 react 多页面应用的坑
electron + react 开发软件遇到的问题与解决方法（更新于2024.03.01）
qq_36361032的博客
08-21 651
官网使用的electron-forge能满足正常的打包，但是如果有需求是某些文件夹或配置文件不想打包进.asar里，就需要使用electron-packager。使用widow.localStorage存储数据只能在软件未关闭前能拿到。一旦软件关闭再重新启动，那么缓存的数据将会被清除掉。使用上面的插件，能有效解决。3、main.js文件的基础配置。
React + Electron封装并打包成桌面应用
热门推荐
钟离龙的博客
08-10 1万+
Electron是什么 ​Electron 是一个由 GitHub 开发的开源库，通过将 Chromium) 和Node.js 组合并使用 HTML，CSS 和 JavaScript 进行构建 Mac，Windows，和 Linux 跨平台桌面应用程序。 原理： 上面已将说了，Electron 通过将 Chromium 和 Node.js 组合到单个 runtime 中来实现的. node...
webpack4搭建React+react-router+redux+antd项目及优化配置（超级详细）（二）
Dyong_1992的博客
11-14 3404
webpack4搭建React+react-router+redux+antd——webpack初始学习 上一节我们创建了最基本的webpack项目，这一节我们使用webpack提供的配置文件定义入口及出口配置，以及在浏览器中打开网页 #定义webpack配置文件 在我们项目webpack-one根目录下创建webpack.config.js配置文件 const path = require('p...
electronic-webpack-react-boilerplate：包含Electron Forge + webpack + React + React Router + Ant Design +图表+ Sass和更少的示例项目
02-05
完整的Electron，Webpack和React样板包含Electron Forge + Webpack + React + React Router + Ant Design +图表+ Sass和更少的示例项目。屏幕截图包含的技术用于雄心勃勃的Electron应用程序的命令行界面。 ...
数据提取工具—electron+react
04-02
1、用electron+react制作的一个数据提取工具，react渲染页面，electron主线程调用本地sqlite数据库 2、数据和依赖包删除了，测试的时候自行添加数据与依赖 3、开发测试，首先用npm start 启动react 然后再用electron...
electronic-react-typescript-webpack-boilerplate：用于Electron + React + TypeScript + Webpack的预配置样板
02-04
预先配置的Electron.js + React.js + TypeScript样板带有Webpack v5和linters配置的预定义。 该样板当前可在macOS和Windows上运行。 如果无法解决 ，请 。 入门 // execute git clone ...
electron-react-webrtc:electron+react+webrtc 音视频等通信
05-25
About Electron electron + chrom内核 + node.js能力 + Native Api 拥有nodejs底层的能力 nativeApi跨平台原生的能力 为什么会出现PC版本 便捷入口 离线可用 安全需求 调用系统的能力 目前的桌面方案 Native QT NW....
react-electronreactreactroutermobxwebpack搭建的脚手架工程
08-15
electron react react-router mobx webpack 搭建的脚手架工程
electron-webpack-react-router-dom-hooks-broken:这个简单的示例演示了在电子Webpack设置的上下文中使用react-router-dom钩子导致的钩子规则错误
03-19
电子Webpack快速启动 一个基本的最小项目结构，即可开始使用进行开发。 多亏了electron-webpack的强大功能，该模板才配备了... 使用进行开发 renderer和main流程的HMR 使用根据您的electron版本自动配置的 使用来包装和构建可分配的电子应用程序 请确保查看以获取更多详细信息。 入门 只需克隆该存储库，安装依赖项，然后开始使用您的应用程序。 强烈建议使用管理器，而不是使用npm 。 # create a directory of your choice, and copy template using curl mkdir new-electron-webpack-project && cd new-electron-webpack-project curl -fsSL https://github.com/electron-userland/elec
使用Electron构建React+Webpack桌面应用的方法
08-28
在项目中，你需要安装一系列依赖包，这些包包括了Babel（用于转换ES6和React的JSX语法）、Webpack及其相关的加载器（如Babel-loader、css-loader、sass-loader等），还有Electron本身和用于打包的electron-packager...
react+electron+AntD编辑桌面应用
zoepriselife316的博客
03-01 1万+
一、开发的首要任务，安装node环境https://nodejs.org/zh-cn/，需要自行下载 二、要下载react，有一个快捷的方法，创建react应用，使用脚手架，下载（可选择是否全局安装）： npm install --global create-react-app 成功运行后会显示： 三、创建react项目： create-react-app demo 新建完后，按着步骤执行...
electron+react刨坑笔记（1）
qq_19338761的博客
03-21 1711
本人对于react还算是比较精通的。但是由于最近看到某条招聘react+electron的前端开发，因而对electron产生了深厚的兴趣。今天开始学习：首先搭建环境，我用的是react-create-app脚手架来搭建react环境安装react-create-app脚手架npm install -g create-react-app 创建项目$ create-react-app myapp ...
electron sqlite3_Electron+React+Antd工程搭建
weixin_39841136的博客
11-25 375
Electron桌面应用构建指南技术栈reactreact-router-domelectronant design搭建过程添加镜像源根目录添加 .yarnrc文件registry "https://registry.npm.taobao.org" sass_binary_site "https://npm.taobao.org/mirrors/node-sass/" phantomjs_...
electron整合react入门（踩坑）记录（1）
萧墨的博客
12-17 2782
1. 前言     之后的工作会涉及到用electron，所以就先玩了一下官方demo https://github.com/electron/electron-quick-start  下载项目到本地，然后和很多node项目一样，执行npm install->npm start即可。   然后发现下载electron速度巨慢，于是乎开始设置淘宝镜像： npm config set...
electron+react刨坑笔记（2）- 在react中调入渲染进程ipcRenderer
qq_19338761的博客
03-21 5198
在react中调用渲染进程时，必须要用不能用import引入进来，也不能直接用require，以下三种方法都会导致报错：查其原因，查是因为：require/exports 和 import/export 形式不一样，遵循的模块化也不一样。require/exports是一种野生的规范。require/exports 的用法只有以下三种简单的写法：const fs = require('fs') e...
HTML_表单 和 表单案例
最新发布
secret010的博客
07-05 274
【代码】HTML_表单 和 表单案例。
electron+react项目实例
04-01
以下是一个简单的 Electron React 项目实例： 1. 创建一个新的项目文件夹并进入该文件夹： ``` mkdir electron-react-app cd electron-react-app ``` 2. 初始化 npm 项目： ``` npm init -y ``` 3. 安装必要的依赖项： ``` npm install --save electron react react-dom npm install --save-dev electron-builder babel-cli babel-preset-env babel-preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin ``` 4. 创建一个 webpack 配置文件 webpack.config.js： ``` const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'index_bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` 5. 创建一个 .babelrc 配置文件： ``` { "presets": ["env", "react"] } ``` 6. 创建一个入口文件 src/index.js： ``` import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<h1>Hello, Electron and React!</h1>, document.getElementById('root')); ``` 7. 创建一个 HTML 文件 src/index.html： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Electron React App</title> </head> <body> <div id="root"></div> <script src="index_bundle.js"></script> </body> </html> ``` 8. 创建一个 main.js 文件作为 Electron 主进程文件： ``` const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'dist', 'index.html'), protocol: 'file:', slashes: true })); mainWindow.on('closed', function () { mainWindow = null }); } app.on('ready', createWindow); app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }); app.on('activate', function () { if (mainWindow === null) { createWindow() } }); ``` 9. 在 package.json 中添加以下脚本： ``` "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production && electron-builder", "electron": "electron ." } ``` 10. 启动项目： ``` npm start ``` 这将启动 Webpack Dev Server 并在浏览器中打开应用程序。在开发期间，每当更改 React 代码时，Webpack Dev Server 会自动重新编译代码并重新加载应用程序。 11. 打包应用程序： ``` npm run build ``` 这将使用 Webpack 和 electron-builder 打包应用程序。打包后的应用程序将在 dist 目录中生成。 12. 运行应用程序： ``` npm run electron ``` 这将启动 Electron 并加载打包后的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值