当前位置:首页 > 技术分析 > 正文内容

Electron 应用打包_electron应用打包32位应用程序

ruisui882个月前 (03-01)技术分析9

为舒缓 Windows 下路径名过长的问题 issues,稍微加快 require 的速度以及简单隐匿源代码,我们可以选择把应用打包成 asar 档案文件,这只需要对源代码做一些很小的改动。大部分用户可以轻松实现这个功能,因为它在 electron-packagerelectron-forgeelectron-builder 中都得到了支持,开箱即用。

生成asar包

asar 是一种将多个文件合并成一个文件的类 tar 风格的归档格式。Electron 无需解压整个文件,就可以从其中读取任意文件内容。
可以按如下步骤来将应用打包成 asar

  • 安装 asar
$ npm install -g asar
  • 使用 asar pack 打包:
$ asar pack your-app app.asar

使用asar包

Electron 中有两类 APIs,分别是 Node.js 提供的 Node APIChromium 提供的 Web API。这两种 API 都支持从 asar 包中读取文件。

Node API

由于 Electron 中打了特别补丁, Node API 中如 fs.readFile 或者 require 之类的方法可以将 asar 视之为虚拟文件夹,读取 asar 里面的文件就和从真实的文件系统中读取一样。

示例:

例如假设我们在 /path/to 文件夹下有个 example.asar 包:

$ asar list /path/to/example.asar
/app.js
/file.txt
/dir/module.js
/static/index.html
/static/main.css
/static/jquery.min.js

asar 包读取一个文件:

const fs = require('fs');
fs.readFileSync('/path/to/example.asar/file.txt');

列出 asar 包中根目录下的所有文件:

const fs = require('fs');
fs.readdirSync('/path/to/example.asar');

使用 asar 包中的一个模块:

const BrowserWindow = require('electron').BrowserWindow;
var win = new BrowserWindow({width: 800, height: 600});
win.loadURL('file:///path/to/example.asar/static/index.html');

Web API

Web 页面里,用 file: 协议可以获取 asar 包中文件。和 Node API 一样,视 asar 包如虚拟文件夹。

示例:

例如可以使用 $.get 来获取文件:


把asar包当作一个普通的文件

某些情况下,例如对 asar 包文件进行校验,我们需要像读取 “文件” 那样读取 asar 包文件。 为此我们可以使用内置的没有 asar 功能的和原始 fs 模块一模一样的 original-fs 模块。

示例:

const originalFs = require('original-fs')
originalFs.readFileSync('/path/to/example.asar')

也可以将 process.noAsar 设置为 true,用来禁用 fs 模块中对 asar 的支持:

const fs = require('fs')
process.noAsar = true
fs.readFileSync('/path/to/example.asar')

Node API缺陷

尽管我们已经尽了最大努力使得 asar 包在 Node API 下的应用尽可能的趋向于真实的目录结构,但仍有一些底层 Node API 我们无法保证其正常工作。

asar包文件是只读的

asar 包中的内容不可更改,所以 Node APIs 里那些可以用来修改文件的方法在对待 asar 包时都无法正常工作。

工作目录在 asar 包中无效

尽管 asar 包是虚拟文件夹,但其实并没有真实的目录架构对应在文件系统里,所以我们不可能将工作目录 working Directory 设置成 asar 包里的一个文件夹。将 asar 中的文件夹以 cwd 形式作为参数传入一些 API 中也会报错。

某些API需要额外解压的asar包

大部分 fs 可以无需解压即从 asar 包中读取文件或者文件的信息,但是在处理一些依赖真实文件路径的底层系统方法时,Electron 会将所需文件解压到临时目录下,然后将临时目录下的真实文件路径传给底层系统方法使其正常工作。 对于这类 API,花销会略多一些。

以下是一些需要额外解压的 API

  • child_process.execFile
  • child_process.execFileSync
  • fs.open
  • fs.openSync
  • process.dlopen

fs.stat的不真实统计信息

asar 包中的文件取 fs.stat,返回的 Stats 对象不是精确值,因为这些文件不是真实存在于文件系统里。所以除了文件大小和文件类型以外,我们不应该依赖 Stats 对象的值。

执行asar包中的二进制文件

Node 中有一些可以执行程序的 API,如 child_process.execchild_process.spawnchild_process.execFile 等,但只有 execFile 可以执行 asar 包中的程序。

因为 execspawn 允许 command 替代 file 作为输入,而 command 是需要在 shell 下执行的,目前没有可靠的方法来判断 command 中是否在操作一个 asar 包中的文件,而且即便可以判断,我们依旧无法保证可以在无任何副作用的情况下替换 command 中的文件路径。

添加未打包的文件到asar包

一些 Node API 会在调用时将文件解压到文件系统中,除了效率问题外,也有可能引起杀毒软件的注意!

为解决这个问题,我们可以在生成 asar 包时使用 --unpack 选项来排除一些文件,使其不打包到 asar 包中,下面是如何排除一些用作共享用途的 native 模块的方法:

$ asar pack app app.asar --unpack *.node

经过上述命令后,除了生成的 app.asar 包以外,还有一个包含了排除文件的 app.asar.unpacked 文件夹,我们需要将这个文件夹一起拷贝,提供给用户。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2365.html

分享给朋友:

“Electron 应用打包_electron应用打包32位应用程序” 的相关文章

vue中如何在自定义组件上使用v-model和.sync

自定义事件tips推荐始终使用 kebab-case 的事件名。(v-on会将事件名自动转换为小写,避免匹配不到)changeData ×change-data √自定义组件的v-model用法:父组件定义数据源(不需要定义修改数据的方法),在子组件标签上通过v-model="data...

学无止境:Git 如何优雅地回退代码

来源:https://zhenbianshu.github.io前言从接触编程就开始使用 Git 进行代码管理,先是自己玩 Github,又在工作中使用 Gitlab,虽然使用时间挺长,可是也只进行一些常用操作,如推拉代码、提交、合并等,更复杂的操作没有使用过,看过的教程也逐渐淡忘了,有些对不起 L...

Windows 下 Git 拉 Gitlab 代码

读者提问:『阿常你好,Windows 下 Git 拉 Gitlab 代码的操作步骤可以分享一下吗?』阿常回答:好的,总共分为五个步骤。一、Windows 下安装 Git官网下载链接:https://git-scm.com/download/winStandalone Installer(安装版)注意...

vue3使用vue-router路由(路由懒加载、路由传参)

vue-router 是 vue的一个插件库1. 专门用来实现一个SPA单页面应用2 .基于vue的项目基本都会用到此库SPA的理解1) 单页Web应用(single page web application,SPA)2) 整个应用只有一个完整的页面3) 点击页面中的链接不会刷新页面, 本身也不会向...

Vue真是太好了 壹万多字的Vue知识点 超详细!

1??、Vue和其他两大框架的区别Angular 学习成本太高React 代码可读性差Vue 学习成本较低 很容易上手VUE官方: https://cn.vuejs.org/v2/guide/comparison.html?2??、Vue是什么Vue是一套用于构建用户界面的渐进式框架 "前端...

分享15个基于Vue3.0全家桶的优秀开源项目

大家好,我是 Echa。今天来分享 15 个基于 Vue3.0 全家桶的优秀开源项目!1. Vue Admin Bettergithub : https://github.com/chuzhixin/vue-admin-bettervue admin better 对比其他来源 admin 框架有如...