阅读 1076

Flutter Engine 编译 —— 我是这样读源码的

级别: ★☆☆☆☆
标签:「Flutter」「Engine」
作者: sunhao
审校: QiShare团队


前言:
之前的文章包括 Flutter Platform ViewFlutterPlatform Channel,都遇到了一些 Framwork 对 Engine 层的调用,本篇就讲讲我们如何来编译 Flutter Engine ,来对源码进行编译,使用 IDE 进行加载阅读。

本文处理方式以官方配置为主,可能会更多的注重一些细节。读者可以直接参考官方文档进行编译。

Setting up the Engine development environment
github.com/flutter/flu…

笔者以 macOS 进行编译,所以这里仅提供 macOS 的编译步骤。

在开始编译之前,还希望你能准备好梯子,否则你可能卡在 ninja -C 中。

通畅的网络很重要!!!

通畅的网络很重要!!!

通畅的网络很重要!!!

编译 Flutter Engine

安装 depot_tools

$ pwd
/Users/sunhao/developmchromium.googlesource.com/chromium/tools/depot_tools.git
复制代码

配置环境变量:建议在 ~/.bash_profile 文件中添加

export PATH=/Users/sunhao/development/depot_tools/:$PATH
复制代码

然后执行

$ source ~/.bash_profile 
复制代码

当然,你也可以配置临时环境变量

$ export PATH=$PATH:/Users/sunhao/development/depot_tools/
复制代码

2、将 engine 项目 fork 到自己的github

关于 github 的使用,这里不多说了,fork 过来,添加 github 的 ssh key 信任。

我这里的地址为:github.com/loosaSH/eng…

3、创建项目目录

你可以创建一个目录,名称推荐为 engine,后面的步骤会自动执行 clone 。

$ pwd
/Users/sunhao/development
$ mkdir engine
复制代码

4、创建 .gclient 文件

进入engine 目录,创建 .gclient 文件

$ cd engine
$ vim .gclient
复制代码

写入如下内容:

solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "git@github.com:<your_name_here>/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]
复制代码

将 <your_name_here> 换成你的 GitHub 名字,例如我的是:

solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "git@github.com:loosaSH/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]
复制代码

:wq 保存退出。

5、执行 gclient sync 命令

这里的执行需要梯子,速度根据你的网络状况,同步下来的文件大小大概有 10G 多吧

$ pwd
/Users/sunhao/development/engine
$ gclient sync
复制代码

需要注意的是,这里需要等待文件自动完成,并且尽量不要打断该命令,显示 100% 后仍有很多操作。

6、重新 fetch flutter/engine 仓库

$ cd src/flutter
$ pwd
/Users/sunhao/development/engine/src/flutter
$ git remote add upstream git@github.com:flutter/engine.git
复制代码

7、安装辅助工具

安装 JDK 1.8 以上

ant 安装

$ brew install ant
复制代码

8、编译 android 相关

确保本地 flutter/engine 仓库是最新的

$ pwd
/Users/sunhao/development/engine/src/flutter
$ git pull upstream master
$ cd /Users/sunhao/development/engine
$ gclient sync
复制代码

执行以下命令编译

// 准备文件,生成 compile_commands.json 文件
$ ./flutter/tools/gn --unoptimized
$ ./flutter/tools/gn --android --unoptimized
// 构建
$ ninja -C out/android_debug_unopt && ninja -C out/host_debug_unopt
复制代码

整个过程比较漫长,耐心等待。

9、编译 iOS 相关

确保本地 flutter/engine 仓库是最新的

$ pwd
/Users/sunhao/development/engine/src/flutter
$ git pull upstream master
$ cd /Users/sunhao/development/engine
$ gclient sync
复制代码

执行以下命令编译

// 准备文件,生成 compile_commands.json 文件
$ ./flutter/tools/gn --ios --unoptimized
$ ./flutter/tools/gn --unoptimized
// 构建
$ ninja -C out/ios_debug_unopt && ninja -C out/host_debug_unopt
复制代码

这样 flutter engine 的编译工作就基本完成了。生成的一些编译文件目录为 src/out 。

阅读 Engine 代码 ——Clion

个人认为 Clion 来阅读 C++ 代码比较方便,并且打开速度明显要快于 VSCode

操作比较简单,将上面生成的 compile_commands.json 文件复制到 src/flutter 目录中,然后使用 Clion 打开项目,indexing 之后便可以跟踪跳转(这一步可能也要一点时间)

阅读 Engine 代码 ——VSCode

官方推荐使用 cquery 进行对 engine 的源码依赖跟踪,

1、cmake 安装

安装 cquery 的过程中需要使用到 cmake

$ brew install cmake
复制代码

2、cquery 安装

$ brew install --HEAD cquery
复制代码

编译 cquery 源码

github.com/cquery-proj…

$ pwd
/Users/sunhao/development
$ git clone --recursive https://github.com/cquery-project/cquery.git
$ cd cquery
$ git submodule update --init
$ mkdir build 
$ cd build
$ cmake .. -DCMAKE_BUILD_TYPE=Release -DCMAKE_INSTALL_PREFIX=release -DCMAKE_EXPORT_COMPILE_COMMANDS=YES
$ cmake --build .
$ cmake --build . --target install
复制代码

3、配置 cquery 环境变量

配置环境变量:建议在 ~/.bash_profile 文件中添加

export PATH=/Users/sunhao/development/cquery/build/release/bin:$PATH
复制代码

然后执行

$ source ~/.bash_profile 
复制代码

3、安装 VSCode、以及cquery插件

4、拷贝 cquery 需要的项目配置文件

将 compile_commands.json 文件从 src/out/compile_commands.json 拷贝到 src/

5、配置 VSCode 设置(还是使用clion吧,舒服多了)

github.com/cquery-proj…

因为我们配置了全局的环境变量,所以可以根据官方的推荐设置一些 highlighting。

在 VSCode 中打开 settings.json,在 json 中增加:

    "cquery.highlighting.enabled.types": true,
    "cquery.highlighting.enabled.freeStandingFunctions": true,
    "cquery.highlighting.enabled.memberFunctions": true,
    "cquery.highlighting.enabled.freeStandingVariables": true,
    "cquery.highlighting.enabled.memberVariables": true,
    "cquery.highlighting.enabled.namespaces": true,
    "cquery.highlighting.enabled.macros": true,
    "cquery.highlighting.enabled.enums": true,
    "cquery.highlighting.enabled.typeAliases": true,
    "cquery.highlighting.enabled.enumConstants": true,
    "cquery.highlighting.enabled.staticMemberFunctions": true,
    "cquery.highlighting.enabled.parameters": true,
    "cquery.highlighting.enabled.templateParameters": true,
    "cquery.highlighting.enabled.staticMemberVariables": true,
    "cquery.highlighting.enabled.globalVariables": true,
复制代码

这样你就可以在 VSCode 中跟踪 flutter/engine 代码了。

总结

阅读源码只是第一步,后面我会分享关于如何使用本地的 Flutter Engine 以及如何进行调试。

参考资料:
Setting up your engine development environment
github.com/flutter/flu…
Compiling the engine
github.com/flutter/flu…
Building cquery
github.com/cquery-proj…
Contributing to Flutter
github.com/flutter/flu…


了解更多iOS及相关新技术,请关注我们的公众号:

小编微信:可加并拉入《QiShare技术交流群》。

关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章:
WebSocket 双端实践(iOS/ Golang)
今天我们来聊一聊WebSocket(iOS/Golang)
用 Swift 进行贝塞尔曲线绘制
Swift 5.1 (11) - 方法
Swift 5.1 (10) - 属性
iOS App后台保活
奇舞周刊

关注下面的标签,发现更多相似文章
评论