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

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

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

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

Setting up the Engine development environment
https://github.com/flutter/flutter/wiki/Setting-up-the-Engine-development-environment

笔者以 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 信任。

我这里的地址为：https://github.com/loosaSH/engine

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 源码

https://github.com/cquery-project/cquery/wiki/Building-cquery

$ 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吧，舒服多了)

https://github.com/cquery-project/cquery/wiki/Visual-Studio-Code#setting-up-the-extension

因为我们配置了全局的环境变量，所以可以根据官方的推荐设置一些 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
https://github.com/flutter/flutter/wiki/Setting-up-the-Engine-development-environment
Compiling the engine
https://github.com/flutter/flutter/wiki/Setting-up-the-Engine-development-environment
Building cquery
https://github.com/cquery-project/cquery/wiki/Building-cquery
Contributing to Flutter
https://github.com/flutter/flutter/blob/master/CONTRIBUTING.md

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