Electron打包前端代码

本文主要介绍如何利用Electron将前端代码打包成exe文件。

其实如何通过Electron将前端代码打包成exe文件,其入门教程讲的挺详细的,但是浏览一遍下来还是不太清楚到底该怎么操作,这里只是将其细化分解。

首先,我们需要确保我们的电脑上已经配置好了Node.js环境,如果没有的话,请到Node.js下载并安装配置。

其次,我们需要有一个写好的Electron应用,如果你不嫌麻烦的话,可以按照入门教程中的打造你第一个Electron应用一步一步自己手动创建,但是我会从他的GitHub仓库里直接下载示例程序来构建Electron应用,因为示例程序中已经包含了必需的index.html, main.js, package.json。这一点,入门教程中也有提及。

1 # 克隆这仓库
2 $ git clone https://github.com/electron/electron-quick-start
3 # 进入仓库
4 $ cd electron-quick-start
5 # 安装依赖库并运行应用
6 $ npm install && npm start

通过上述命令npm install && npm start,我们即可打开示例Electron应用了。

通过view选项中的Toggle Developer Tools,我们可以打开开发者工具对代码进行调试,这一点和直接使用浏览器进行开发没有什么区别。

接下来,我们只需要将我们写好的代码整合到上述Electron应用中即可了。

当我们需要交付成果物给客户时,我们不可能要求客户配置好Node.js环境,同样不可能让客户通过命令运行我们的应用程序,这个时候我们需要使用Electron部署前端应用程序。这一点,入门教程中也有提及。

然后,我们下载好指定的二进制文件(我下载的是electron-v1.7.0-win32-x64.zip,解压到electron-build中,名称随便定),然后将我们整合之后的Electron应用文件夹重命名为app,放到Electron的资源文件夹下(在macOS中是指Electron.app/Contents/Resources/,在Linux和Windows中是指electron-build/resources/)即可。

接着,运行Electron.app(或者Linux中的electron,Windows中的electron.exe),Electron就可以不依赖Node.js运行我们的应用程序了。

最后,就可以将整个的electron-build交付给客户使用了。

有一点需要注意的是,如果不做任何操作,在Electron中直接使用jQuery会没有效果或直接产生异常,解决方案如下:

将jquery.min.js文件中最前面的

1 ! function(a, b) {
2     "object" == typeof module && "object" == typeof module.exports ? module.exports = a.document ? b(a, !0) : function(a) {
3         if (!a.document) throw new Error("jQuery requires a window with a document");
4         return b(a)
5     } : b(a)
6 }

替换为

!function(a,b){b(a)}

即可。

如果对于这种形式的成果物(并非一个正在的exe应用程序)还不是很满意的话,可以参考这篇教程中的2. 打包成安装包将electron-build打包成安装包(但是通过测试,并不成功,有兴趣的童鞋可以深入研究一下)。

时间: 2024-10-13 03:20:27

Electron打包前端代码的相关文章

【转载】【grunt整合版】30分钟学会使用grunt打包前端代码

[grunt整合版]30分钟学会使用grunt打包前端代码 grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装

Linux安装npm并打包前端代码

查看node版本$ node -v查看npm版本$ npm -v如果没有安装node及npm,需要先安装node及npm#yum install node# yum install npm安装cnpm并切换淘宝镜像(使用国外镜像速度慢)$ npm install -g cnpm --registry=https://registry.npm.taobao.org查看cnpm信息$ cnpm i使用npm打包前端vue代码$ npm run build运行dev$ npm run dev 原文地址

【grunt整合版】30分钟学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun

【grunt第一弹】30分钟学会使用grunt打包前端代码

前言 以现在前端js激增的态势,一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说,文件上百简直是家常便饭,那么这个时候我们的js文件应该怎么处理呢?另外,对于css文件,又该如何处理呢??这些都是我们实际工作中要遇到的问题,比如我们现在框架使用zepto.backbone.underscore我们要如何将他们合成一个libs文件,这都是令人头疼的问题 但是grunt的出现却让这些事情变得优雅起来!简单一键,打包结束,尼玛不是不可能啊! grunt 是一套前端自动化工具,一个基于nod

【grunt整合版】学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun

30分钟学会使用grunt打包前端代码

grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学,有误请包涵 准备阶段 1.nodeJs环境 因为grunt是基于nodeJs的,所以首先各位需要安装nodeJS环境,这块我们便不管了http://www.cnblogs.com/yexiaochai/p/3527418.html 2.安装grunt 有了nodeJs环境后,我们便可以开始搞grun

app前端代码打包步骤

一.搭建项目环境 1.安装node.js 在网上找到nodejs压缩包,下载解压后安装node-v8.9.3-x64.msi文件. 安装完毕后,在windows的cmd控制台输入node -v或node --version命令,测试是否安装成功,如图1.1,出现版本号就是成功了. 或 图1.1 测试nodejs图 2.安装npm npm(Node Package Manager)的安装,其实新版本的node已经集成了npm,所以安装成功node,就不用管这步了,为了保险,我们也测试下是否安装成功

前端项目模块化的实践2:使用 Webpack 打包基础设施代码

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 (实现中) 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三方类库: 为了提高加载速度我们打包时需要进行很多额外工作: 代码压缩: Tre

前端代码异常日志收集与监控

在复杂的网络环境和浏览器环境下,自测.QA测试以及 Code Review 都是不够的,如果对页面稳定性和准确性要求较高,就必须有一套完善的代码异常监控体系,本文从前端代码异常监控的方法和问题着手,尽量全面地阐述错误日志收集各个阶段中可能遇到的阻碍和处理方案. ? 收集日志的方法 平时收集日志的手段,可以归类为两个方面,一个是逻辑中的错误判断,为主动判断:一个是利用语言给我们提供的捷径,暴力式获取错误信息,如 try..catch 和 window.onerror. 1. 主动判断 我们在一些运