当一个react-electron项目做好之后就可以开始进行打包,首先就是打包react,这个自然不用多说,不过事先要记住一点,项目目录主进程文件main.js最好放在根目录,再执行打包命令 npm run build 这个时候目录结构应该是这样 这个时候需要强调的是,react项目已经打包完成,这个时候完全可以只靠main.js主进程文件和build文件夹就可以运行起来我们的项目,换句话说,剩下的文件与打包electron没有任何关系,甚至可以直接删除,但是毕竟是项目源代码,肯定是不建议删的,

话不多说,先放上截图和仓库地址: 代码仓库:github 故事背景 网络抓包 之前公司内部因为开发需要,需要和后端进行接口联调,测试环境的时候,经常会涉及到一些状态改变要看交互样式的问题.比如测试需要测商品的待支付.支付中.支付完成等各种节点的交互样式是否符合预期,这种情况测试一般会去造数据或者让后端改数据库接口. 有的小伙伴可能会用 Charles 修改返回数据进行测试.但是 Charles 的抓包体验和配置体验感觉有点麻烦,不是很友好,所以我们自己做了个抓包&mock工具: 傻瓜式交互一次性

问题产生原因:过多无用的模块被打包放入到程序中 解决: 删除 package-lock.json ,是由于这个文件导致打包时候放入过多文件,删除即可.

原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面应用仍然有充分利用硬件的优势. 今天,我们可以通过我们熟悉的 HTML.JS 和 Node.js 来创建桌面应用,打包成一个可执行文件,并且发布在 Windows, OS X 和 Linux 上. 有两个受欢迎的开源项目,能够帮助我们实现这个目的.一个是几个月前我们讨论到的 NW.js,另一个是今天

ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验   最近需要讲AntD Pro项目(以下简称Adp)打包成桌面安装使用,因为我的项目是一个企业业务计算系统,并不会常有需求的更新,因此打包成桌面应用,用户体验更好. 首先,Adp项目和Electron打包分开,就是不要把两者的依赖和配置文件放在一个项目里,这是保持项目的纯粹性,各自专注自己的事情.因此,我们就需要一个Adp项目,一个Elect

Electron 应用 1.去官方下案例 # 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这个仓库 $ cd electron-quick-start # 安装依赖并运行 $ npm install && npm start 2.安装electron-packager npm install electron-packager --save-dev package.json "

这几天在构思项目,研究了一下Electron,记录下来. 说起WEB桌面程序,当前最火的就是Electron了. Electron的架构用一句话总结,就是一个main.js进程加上一个或数个chrome窗口,每个窗口都包含一个独立的Node.js. 这样的架构,使得这种桌面应用必须是一个(或数个)单页面应用(SPA),而这个SPA还拥有访问本地API的能力(Node.js). 一方面,程序对前端框架的依赖必然加强,想再JQuery打天下就不那么容易了:另一方面也大大加强了前端框架的能力与版图.

从开发角度来说,选择用 nw.js 还是 election ,区别其实不是很大.大部分工作还是在自己的 javascript 和 HTML 上.国内比较有名的,比如微信web开发工具.钉钉都是基于 nw.js 开发的 electron 相对来说比 nw.js 靠谱.有一堆成功的案例: 1. Atom 编辑器 2. Slack (那个独角兽公司)3. Visual Studio Code 4. WordPress 等等.. 优点:1. 开源的核心扩展比较容易,目前是基于 node 6.x,加之现在

市面上作为嵌入的组件的可用的浏览器内核,不外乎这几个:webkit.cef.nwjs.electron. 1.cef:优点是由于集成的chromium内核,所以对H5支持的很全,同时因为使用的人也多,各种教程.示例,资源很多.但缺点很明显,太大了.最新的cef已经夸张到了100多M,还要带一堆的文件.同时新的cef已经不支持xp了(chromium对应版本是M49).而且由于是多进程架构,对资源的消耗也很夸张.如果只是想做个小软件,一坨文件需要带上.超大的安装包,显然不能忍受. 2.nwjs,或

我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): 使用ffi-napi引入C++的dll electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)   引言 本篇将介绍如何将你开发的electron项目(main.js), 打包成一个可执行桌面程序(.exe). 有

登高远眺 天高地迥,觉宇宙之无穷 基础技术 使用 JavaScript 框架的代价 作者从 JavaScript 下载时间.解析时间.执行时间.内存占用四个角度评测了 jQuery.Angular.React.Vue 四个框架,最终得出结论:「框架不值得」,应该选择原生 JavaScript 或选择超轻量级框架或在服务端渲染.此文可配合蒲公英技术周刊第三期的 Svelte 安利文一同复用. Node.js 14 正式版发布 作为下一个 LTS 版本的 Node.js 14 终于发布了.Node.

vivo 互联网前端团队-Yang Kun 一.背景 在团队中,我们因业务发展,需要用到桌面端技术,如离线可用.调用桌面系统能力.什么是桌面端开发?一句话概括就是:以 Windows .macOS 和 Linux 为操作系统的软件开发.对此我们做了详细的技术调研,桌面端的开发方式主要有 Native . QT . Flutter . NW . Electron . Tarui .其各自优劣势如下表格所示: 我们最终的桌面端技术选型是 Electron ,Electron 是一个可以使用 Web

Electron 不错,但也不是完美的. Electron 带来了很多优秀的桌面软件,但并不一定总是适合我们的需求. 多个选择总是好事! 我使用 Electron 遇到的一些麻烦 1.Electron 太大了! 2.每一个 Electron 写的软件都要重复地带一个 Electron -- 升级与分发都不方便. 3.Electron 不方便嵌入其他窗口界面,与其他语言.技术融合不易. 4.并不是所有桌面软件都需要 Electron 的跨平台特性.macOS , Linux 的桌面系统市场份额小于

新用户购买<Electron + Vue 3 桌面应用开发>,加小册专属微信群,参与群抽奖,送<深入浅出Electron>.<Electron实战>作者签名版. 1等奖:<深入浅出Electron>+<Electron实战> 2等奖:<深入浅出Electron> 3等奖:<Electron实战> 抽奖活动是掘金组织的,仅限近几日加入微信群的新成员(目前人还不多),我负责抽奖.邮寄,11月20日开始抽奖.凡参与抽奖的读者都有

目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWindow = electron.BrowserWindow //主进程 const ipc = require('electron').ipcMain; app.on('ready',function(){ var mainWindow = new BrowserWindow({ width: 800

对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出.   一.安装 如果你本地按照github上的 # Install the `electron` command globally in your $PATH npm install electron-prebuilt -g 安装不起来的话,没事.按照这个博友的方法来安装即可.Electron安装   二.Electron是什么 类似NW.js.但是好像比它强大很多.而且社区很活跃,很有前途.   三.废话不多说,直接上实例.

我已经从事过好多年的SPA开发工作,我发现很多的程序猿都从来不往 bundle.js 文件的体积上动脑筋,这让我有点懵逼. “安心洗路,等俺把代码混淆压缩后就一切666了”,若是有人这么说,我会翻白眼. 其实当我们压缩 bundle.js 的时候,我们可能会凭空折腾出一个庞大的应用,导致其加载时间抑或在移动端的连接时间变慢.那么问题就来了——我们是否有办法给 bundle 显著地瘦瘦身? 其实一切都很简单——使用相对文件路径即可.我们来俩个示例看看它们的区别. 示例1 首先,我们使用ES6的解构

Electron能干嘛 Vscode 基于Electron开发的,他是用来开发桌面软件的,可以轻易的跨平台 他的前身是atomshell,图标很丑,不用在意,一点也不像vscode也不用在意.   Let's go Electron 是基于Node Chromium V8 组合而来,目前的版本是1.3.3   https://github.com/electron/electron/releases/download/v1.3.3/electron-v1.3.3-win32-x64.zip  

原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标准,当Window中存在require时,会启用模块引入的方式,导致报错 Uncaught ReferenceError: $ is not defined,本文研究了高低版本jQuery引入的正确方式. 1. 报错原因 Electron默认启用了Node.js的require模块,而jQuery等

原文地址http://huisky.com/blog/161218121551123 本文介绍了Electron的环境配置,包括Electron下载.nodejs下载安装.NPM+Bower安装配置.app打包. 1. Electron下载 Electron - Build cross platform desktop apps with JavaScript, HTML, and CSS,即提供了一个利用JavaScript.HTML.CSS构建桌面应用的平台,实例Atom.vscode. 目