Flutter Engine 編譯 —— 我是這樣讀原始碼的

QiShare發表於2020-02-24
Flutter編譯原始碼

級別： ★☆☆☆☆
標籤：「Flutter」「Engine」
作者： sunhao
審校： QiShare團隊

前言：
之前的文章包括 Flutter Platform View 、FlutterPlatform 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及相關新技術，請關注我們的公眾號：

Flutter Engine 編譯 —— 我是這樣讀原始碼的

小編微信：可加並拉入《QiShare技術交流群》。

Flutter Engine 編譯 —— 我是這樣讀原始碼的

關注我們的途徑有：
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後臺保活
奇舞週刊

相關文章