平台交叉打包 GYP

GYP,Generate Your Projects,一个google开源的构建系统,最开始用于Chromium项目,现在一些其他的开源项目也开始使用GYP,如V8node-gyp。本文是学习使用GYP的笔记,算是一个GYP的简明教程吧。

特别之处

在已经有很多的构建系统的情况下,gyp诞生的哲学或者说优点如下:

  1. 各平台使用各自主流的构建系统。
    • 程序员更熟悉自己的平台,减少学习成本。
    • 构建速度快。自己平台的主流构建系统的速度是各平台优化过的。
  2. 在一个平台上可以生成所有支持的平台的工程文件。
    • 如在mac上也可以生成Visual Studio工程,windows上也可以生成Xcode工程。
  3. 生成的工程文件和手工创建的工程文件没有区别
    • 这样,随时可以停止使用gyp。别人可以只使用相关工程文件而不使用gyp

安装

前提条件:本机需要安装python,svn或git。

下载:
svn方式,svn checkout http://gyp.googlecode.com/svn/trunk/ <gyp-dir>
git方式,git clone http://git.chromium.org/external/gyp.git <gyp-dir>git clone https://git.chromium.org/git/external/gyp.git <gyp-dir>

安装:
有两种安装方式。

  1. 执行安装命令
    1
    2
    
    cd <gyp-dir> # 刚才的下载目录
    [sudo] python setup.py install
    
    这个命令做的事情主要是安装python的第三方扩展到/Library/Python/2.7/site-packages/gyp-0.1-py2.7.egg,并把gyp的可执行文件copy到/usr/local/bin。
  2. 简易安装,直接将<gyp-dir>加入PATH。

使用

  1. 编写.gyp文件
  2. 运行gyp命令生成makefile、build.ninja文件或xcode、vs等工程
  3. 编译。根据第2步的结果,运行make、ninja或者在xcode、vs里编译

举一个最简单的例子,源文件如下:

main.cpp
1
2
3
4
5
6
#include <iostream>

int main(int argc, const char* argv[]) {
    std::cout << "Hello World!" << std::endl;
    return 0;
}
编写.gyp文件如下: main.gyp
1
2
3
4
5
6
7
8
9
10
11
{
  'targets': [
    {
      'target_name': 'main',
      'type': 'executable',
      'sources': [
        'main.cpp',
      ],
    },
  ],
}

在源文件目录下运行命令gyp --depth=. main.gyp,生成工程文件。打开生成的工程文件编译、运行即可。

更多例子可以参考play_gyp

生成跨平台工程的实践经验

如上个例子中展示的,运行gyp命令的大概方式为gyp --depth=. --generator-output=build -f ninja main.gyp,其中 –depth指定工程的根目录,–generator-output指定工程文件的输出目录,默认为当前目录,-f指定生成工程文件的类型,常用的有'make', ‘ninja’, ‘xcode’, ‘msvs’, ‘scons'。更多的命令行选项可以通过gyp -h查看。

工程实践中还有一种更方便的生成不同平台工程的方法,即使用gyp的全局变量。定义全局变量的好处是可以使用别人封装好的gyp脚本,如Chromium工程中就可以使用gyp_chromium.py了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# iOS 真机
export GYP_DEFINES="$GYP_DEFINES OS=ios target_arch=armv7"
export GYP_CROSSCOMPILE=1
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS=xcode

# iOS 模拟器
export GYP_DEFINES="$GYP_DEFINES OS=ios target_arch=ia32"
export GYP_CROSSCOMPILE=1
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS=xcode

# mac
export GYP_DEFINES="$GYP_DEFINES OS=mac target_arch=x64"
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS=xcode

# android arm target
export GYP_DEFINES="$GYP_DEFINES OS=android"
export GYP_CROSSCOMPILE=1
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS=ninja

# android x86 target
export GYP_DEFINES="$GYP_DEFINES OS=android target_arch=ia32"
export GYP_CROSSCOMPILE=1
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS=ninja

# android MIPS target
export GYP_DEFINES="$GYP_DEFINES OS=android target_arch=mipsel"
export GYP_CROSSCOMPILE=1
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS=ninja

# windows
export GYP_DEFINES="$GYP_DEFINES OS=win"
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS= msvs # or msvs-ninja
export GYP_MSVS_VERSION = 2008

# linux
export GYP_DEFINES="$GYP_DEFINES OS=linux" # or unix
export GYP_GENERATOR_OUTPUT=../build
export GYP_GENERATORS=make

# gyp 其他可用的 环境变量
GYP_GENERATOR_FLAGS

也可以通过修改GYP_GENERATORS,生成各种类型的工程文件

  • ninja for Ninja
  • make for Makefiles
  • msvs for Visual Studio
  • msvs-ninja for Visual Studio project building with ninja
  • xcode for Xcode

gyp文件语法

GYP的输入文件习惯上后缀为.gyp或.gypi。.gypi文件作为.gyp文件的include文件。 以Visual Studio为例,.gyp文件对应.sln工作空间,.gyp文件中的target对应.vcproj或.vxcproj工程。

.gyp文件的顶级元素为'variables’, ‘includes’, ‘target_defaults’, ‘targets’, ‘conditions'。语法是JSON,或者说是允许trailing comments的python。.gyp文件之间其实可以不用相互引用,gyp会递归的扫描当前目录的所有子目录,处理扫描到的所有*.gyp文件。

官方文档

变量

变量分为三类,Predefined、User-defined、Automatic。
变量设置默认值的方法:name%:value。只有name未定义时,才将name的值设置为value.

  • Predefined,命名习惯为CAPITAL_LETTERS。
    1. OS:用于判断操作系统
    2. EXECUTABLE_PREFIX:可执行文件的前缀
    3. EXECUTABLE_SUFFIX:可执行文件的后缀
    4. INTERMEDIATE_DIR:中间文件目录,只对单一target有效
    5. SHARED_INTERMEDIATE_DIR:中间文件共享目录,所有target(包括跨.gyp文件的target)共用同一目录
    6. PRODUCT_DIR:输出文件(编译出的可执行文件、库等)的主目录
  • User-defined,命名习惯为lowercase_letters。变量使用的方式如下
    1. <(VAR) early phase, value is string
    2. >(VAR) post phase, value is string
    3. <@(VAR) early phase, value is list
    4. >@(VAR) post phase, value is list
  • Automatic,dictionary中,name:string的key/value对会自动生成一个_name的变量,值为string

命令

gyp可以执行shell命令,即将命令内容传递给shell执行,然后获得返回值。
用法为<!(cmd)<!@(cmd),前者返回值为string,后者返回值为list。

这样,虽然gyp没有提供通配符,但是可以通过命令实现这个功能,如实现添加当前目录下所有.cpp后缀的文件作为sources:

1
2
3
'sources': [
    '<!@(ls -1 ./*.cpp)',
],

target的配置项目

顶级元素下的target_defaults中可以设置所有targets共用的配置项目,targets中可以具体配置每个target。
常用的target可分为可运行程序、静态库、动态库等,但在跨平台时,不同平台的target各不相同,参数的设置也相差很远。 target的通用框架如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
    'targets': [{
        'target_name': 'target_one',
        'type': 'executable',
        'dependencies': [
            'xyzzy',
            '../bar/bar.gyp:bar',
        ],
        'defines': [
            'DEFINE_FOO',
            'DEFINE_A_VALUE=value',
        ],
        'include_dirs': [
            '..',
        ],
        'sources': [
            'file1.cc',
            'file2.cc',
        ],
        'conditions': [
          ['OS=="linux"', {}],
          ['OS=="win"', {}]
        ],
    },],
}
target的一些常用配置,各个平台都差不多,gyp提供了统一的设置方法。
defines为宏定义,对应-D或/D;
include_dirs对应-I或/I;
cflags为编译选项,对应类似-Werror或/Werror;
ldflags为链接选项,对应类似-pthread;

target还有一些在类型不同、平台不同时,差别很大的配置,列举一些如下:

  • 静态库或动态库

direct_dependent_settings:定义一些编译参数、宏定义等,这些定义将导出到直接依赖该库(通常是第三方库)的target
all_dependent_settings:定义一些编译参数、宏定义等,这些定义将导出到所有依赖该库的target,包含直接依赖和间接依赖
link_settings:定义一些当将该库作为输入时需要配置的链接参数。通常是对静态库有效,动态库忽略
export_dependent_settings:列出一些dependencies中的target,direct_dependent_settings定义的配置将应用到export_dependent_settings列出的target。即将依赖该库的配置导出到该库依赖的target

  • 跨平台工程

针对各个平台不同的配置,gyp的策略是直接使用各平台工程的原生参数。如生成Xcode工程时,可以直接在gyp文件中使用SDKROOT,TARGETED_DEVICE_FAMILY等Xcode中使用的参数。

在xcode_settings对象中设置Xcode的特有参数
在msvs_settings对象中设置Visual Studio的特有参数。

这种策略有一个便利之处。以Xcode工程为例,如果有不知道怎么设置的选项,可以先在Xcode工程中设置好,再从工程文件.xcodeproj包内的project.pbxproj文件中拷贝出来,同步到.gyp文件中。

gyp的潜规则

  1. target的sources项会按照对应平台自动过滤后缀(*_linux.{ext}, *_mac.{ext}, *_posix.{ext} or *_win.{ext})不符合的源文件。

参考资料

  1. gypDemo
  2. gypGettingStarted
<think>我们正在Windows系统上为Vue3.5.13应用构建Linux平台的桌面应用。核心工具是electron-builder,它支持跨平台构建。注意:虽然我们是在Windows上操作,但electron-builder可以为其他平台打包(需要相应依赖或配置)。关键点:1.确保项目已经按照Vue3和Electron配置好(参考之前的配置,但本次我们关注在Windows上为Linux打包)2.在Windows上,我们需要安装必要的工具来构建Linux目标(例如WSL,但electron-builder也支持直接构建,不过可能需要一些额外配置)3.由于在Windows上直接构建Linux应用可能涉及交叉编译,有时可能遇到问题。另一种做法是在Windows上使用WSL(WindowsSubsystemforLinux)来构建,这样环境更接近Linux。这里提供两种方案:方案一:在Windows上直接使用electron-builder构建Linux应用(可能依赖一些工具链)方案二:在WSL中构建(推荐,因为环境更一致)我们首先尝试方案一,如果遇到问题再采用方案二。步骤:1.确保项目已配置好Electron和electron-builder(参考之前的步骤,已正确配置vite.config.js和electron/main.js)2.在Windows上安装必要的依赖:-由于我们要构建Linux应用,需要确保electron-builder能够找到相应的构建工具。在Windows上,我们需要安装一些Linux构建工具链(例如,通过WSL或者使用docker),但electron-builder也支持直接构建。3.修改package.json,指定构建目标为Linux,并选择合适的打包格式(如AppImage,snap,deb等)4.运行构建命令时指定平台和架构。但是,electron-builder官方文档指出:在Windows上构建Linux目标,需要安装WSL。因为构建过程需要一些Linux特有的工具(如fakeroot,dpkg等)。因此,我们更推荐使用WSL来构建Linux应用。方案二详细步骤(使用WSL):1.确保Windows上已安装WSL(如Ubuntu发行版)并配置好基本环境(包括Node.js和npm/yarn)。安装WSL的方法(以管理员身份打开PowerShell):wsl--install然后重启计算机。2.在WSL中安装Node.js(版本需与Windows中的一致或兼容):sudoaptupdatesudoaptinstallnodejsnpmsudonpminstall-gnsudonstable#安装最新稳定版Node.js3.将Windows中的项目文件夹复制到WSL的文件系统中(或者直接在WSL中访问Windows文件系统,但可能会影响性能),建议复制到WSL的家目录。4.在WSL中进入项目目录,安装依赖(注意:由于electron是平台相关的,我们需要在Linux环境下重新安装electron的二进制文件):rm-rfnode_modules#删除原有(可能是在Windows上安装的)依赖npminstall#在Linux环境中重新安装5.然后,在WSL中运行构建命令:npmrunbuild#如果package.json中已经配置了构建脚本为打包Electron应用或者,我们可以直接使用electron-builder命令构建:npxelectron-builder--linux6.构建完成后,安装包将生成在dist目录中。如果我们不想删除node_modules,也可以尝试在Windows中安装依赖时使用--ignore-scripts,然后在WSL中重新构建原生模块(但这样比较复杂,所以推荐直接删除node_modules重装)。方案一(直接构建)的步骤(如果不想用WSL):1.安装必要的工具:在Windows上,我们需要安装一些Linux构建工具。但是,electron-builder官方推荐在Linux上构建Linux应用,因此直接构建可能会有问题。2.我们可以尝试在Windows上使用docker来构建(但这里不展开,因为更复杂)。3.配置package.json,添加构建脚本和目标:"build":{"appId":"com.example.yourapp","productName":"YourApp","directories":{"output":"dist"},"linux":{"target":["AppImage","deb","snap","rpm"],"icon":"public/icon.png","category":"Utility"}}4.然后运行:npmrunbuild----linux或者npxelectron-builder--linux5.但是,由于缺少Linux环境,可能会失败。此时,electron-builder会提示需要安装WSL。因此,我们还是推荐使用方案二。具体步骤(以方案二为例)——详细:在Windows上安装WSL:1.以管理员身份打开PowerShell,输入:wsl--install然后等待安装完成并重启计算机。2.打开WSL(在开始菜单中搜索Ubuntu,或者从命令行输入wsl)。3.更新包列表并安装Node.js:sudoaptupdatesudoaptinstallnodejsnpmsudonpminstall-gnsudonstablehash-r#重置哈希4.检查Node.js和npm版本:node-vnpm-v5.将项目复制到WSL中。假设Windows项目路径为`C:\Users\YourName\project`,在WSL中:cp-r/mnt/c/Users/YourName/project~/projectcd~/project6.删除原有的node_modules(因为是在Windows上安装的,可能包含二进制模块不兼容):rm-rfnode_modulesnpminstall#重新安装依赖(注意:这里使用npm,也可以用yarn)7.开始构建:npmrunbuild#或者npxelectron-builder--linux注意:如果遇到缺少依赖,可能需要安装一些Linux库:sudoaptinstall-ybuild-essentiallibc6-devlibxtst6libnotify-binlibnss3libgtk-3-0libxss1libgconf-2-4构建完成后,dist目录下会有AppImage、deb等安装包。另外,为了在Windows上开发时方便,我们可以在package.json中添加专门的构建脚本:"scripts":{"build":"vitebuild&&electron-builder","build:linux":"electron-builder--linux"}然后在WSL中运行:`npmrunbuild:linux`注意事项:-项目中的路径问题:在Windows和Linux中路径分隔符不同,因此代码中建议使用`path.join`来兼容。-图标:确保图标路径正确,推荐使用256x256像素以上的PNG格式。引用参考:[^1]:electron-builder官方文档中提到,要为Linux构建,建议在Linux环境中进行[^1]。[^2]:使用WSL可以在Windows上获得与Linux几乎相同的开发环境[^2]。[^3]:通过配置electron-builder的linux选项,可以生成多种Linux发行版的安装包[^3]。构建命令总结:在WSL中,进入项目目录后:```npminstallnpmrunbuild:linux#或者直接运行npxelectron-builder--linux```如果构建成功,即可在dist目录找到生成的Linux安装包。相关问题:1.如何为不同Linux发行版构建特定格式的安装包?2.如何解决在WSL中构建时遇到的依赖问题?3.如何优化Electron应用在Linux上的性能?</think> ### 在 Windows 系统上为 Linux 构建 Vue 3.5.13 的 Electron 桌面应用 以下是完整的跨平台打包流程(Windows → Linux),需要解决的关键是通过 Windows 主机为 Linux 目标系统生成可执行文件: #### 📦 1. 项目配置准备 ```json{4-9}[package.json] { "name": "vue-linux-app", "version": "1.0.0", "scripts": { "build": "vite build && electron-builder --linux", "build:linux": "electron-builder --linux" }, "build": { "appId": "com.example.linuxapp", "linux": { "target": ["AppImage", "deb"], "icon": "public/icon_linux.png", "category": "Utility" } } } ``` > 关键配置说明: > - `target`: 指定 Linux 打包格式(推荐 AppImage + deb) > - `icon`: 需准备 ≥512×512 PNG 格式图标[^1] #### 🧩 2. 修改 Vite 配置 ```javascript{7-8}[vite.config.js] import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' export default defineConfig({ base: './', // 必须设置为相对路径 build: { outDir: 'dist' }, plugins: [ vue(), electron({ entry: 'electron/main.js' }) ] }) ``` #### ⚙️ 3. Electron 主进程配置 ```javascript{11,13}[electron/main.js] const { app, BrowserWindow, Menu } = require('electron') const path = require('path') function createWindow() { // 创建无菜单栏窗口(Linux桌面环境兼容) Menu.setApplicationMenu(null) const win = new BrowserWindow({ webPreferences: { contextIsolation: false, nodeIntegration: true } }) // 生产环境加载打包文件 win.loadFile(path.join(__dirname, '../dist/index.html')) } app.whenReady().then(createWindow) ``` #### 🛠️ 4. Windows 主机环境设置 ```powershell # 安装必要的 Linux 交叉编译工具 npm install --save-dev @electron-builder/cli npm install --save-dev electron-builder # 配置 Linux 目标架构 npx electron-builder install-app-deps --arch=x64 --platform=linux # 确保安装依赖 npm install fakeroot dpkg # 通过 WSL 安装(见步骤5) ``` #### 🐧 5. 通过 WSL 构建(推荐方案) 1. 启用 Windows Subsystem for Linux ```powershell wsl --install -d Ubuntu ``` 2. 在 WSL 中设置构建环境: ```bash sudo apt update sudo apt install build-essential libc6-dev dpkg fakeroot rpm npm install -g node-gyp ``` 3. 从 WSL 访问 Windows 项目: ```bash cd /mnt/c/项目路径/ npm install npm run build:linux ``` 4. 生成的安装包在 `/dist` 目录: - `.AppImage`(通用 Linux 可执行文件) - `.deb`(Debian/Ubuntu 安装包) #### ⚠️ 6. 纯 Windows 环境构建(备选方案) ```powershell # 在包管理器(如 Chocolatey)安装依赖 choco install make python3 # 设置环境变量 $env:CI = "true" # 强制启用持续集成模式 $env:LINUX_BUILD = "1" # 执行构建 npm run build:linux ``` #### 🔍 验证与分发 1. 使用虚拟机(如 VirtualBox)测试生成的 `.AppImage`: ```bash chmod +x your-app.AppImage ./your-app.AppImage ``` 2. 生成的 `your-app_1.0.0_amd64.deb` 可直接在 Debian 系发行版安装 > ### 技术说明:跨平台打包原理 > $$ > \text{Windows 主机} \xrightarrow{\text{electron-builder}} > \begin{bmatrix} > \text{Linux 二进制} \\ > \text{依赖库} \\ > \text{桌面配置} > \end{bmatrix} > $$ > > 通过 Node.js 环境抽象层实现跨平台编译,实际依赖以下组件[^3]: > 1. **app-builder-bin**:交叉编译核心 > 2. **dpkg/fakeroot**:DEB 包生成器 > 3. **AppImageKit**:便携式打包工具
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值