閒魚Flutter混合工程持續集成的最佳實踐

做者：閒魚技術-然道

1. 引言

在以前的文章《Flutter混合工程改造實踐》中，有些同窗留言想了解抽取Flutter依賴到遠程的一些實現細節，因此本文重點來說一講Flutter混合工程中的Flutter直接依賴解除的一些具體實現。

2. 思考

由於目前咱們閒魚是Flutter和Native混合開發的模式，因此存在一部分同窗只作Native開發，並不熟悉Flutter技術。
（1）若是直接採用Flutter工程結構來做爲平常開發，那這部分Native開發同窗也須要配置Flutter環境，瞭解Flutter一些技術，成本比較大。
（2）阿里集團的構建系統目前並不支持直接構建Flutter項目，這個也要求咱們解除Native工程對Flutter的直接依賴。
鑑於這兩點緣由，咱們但願能夠設計一個Flutter依賴抽取模塊，能夠將Flutter的依賴抽取爲一個Flutter依賴庫發佈到遠程，供純Native工程引用。以下圖所示：

>Flutter直接依賴解除

3. 實現

3.1 Native工程依賴的Flutter分析

咱們分析Flutter工程，會發現Native工程對Flutter工程的依賴主要有三部分：
1. Flutter庫和引擎: Flutter的Framework庫和引擎庫。
2. Flutter工程: 咱們本身實現的Flutter模塊功能，主要爲Flutter工程下lib目錄下的dart代碼實現的這部分功能。
3. 本身實現的Flutter Plugin: 咱們本身實現的Flutter Plugin。

咱們解開Android和iOS的APP文件，發現Flutter依賴的主要文件以下圖所示：

Flutter依賴的文件（Flutter產物）

其中，
Android的Flutter依賴的文件：
1. Flutter庫和引擎：
icudtl.dat、libflutter.so、還有一些class文件。這些都封裝在flutter.jar中，這個jar文件位於Flutter庫目錄下的[flutter/bin/cache/artifacts/engine]下。
2. Flutter工程產物：
isolate_snapshot_data、isolate_snapshot_instr、vm_snapshot_data、vm_snapshot_instr、flutter_assets。
3. Flutter Plugin：
各個plugin編譯出來的aar文件。
其中：

• isolate_snapshot_data 應用程序數據段
• isolate_snapshot_instr 應用程序指令段
• vm_snapshot_data VM虛擬機數據段
• vm_snapshot_instr VM虛擬機指令段

iOS的Flutter依賴的文件：
**1. Flutter庫和引擎：**Flutter.framework
**2. Flutter工程的產物：**App.framework
**3. Flutter Plugin：**編譯出來的各類plugin的framework，圖中的其餘framework

那咱們只須要將這三部分的編譯結果抽取出來，打包成一個SDK依賴的形式提供給Native工程，就能夠解除Native工程對Flutter工程的直接依賴。

3.2 Android依賴的Flutter庫抽取

3.2.1 Android中Flutter編譯任務分析

Flutter工程的Android打包，其實只是在Android的Gradle任務中插入了一個flutter.gradle的任務，而這個flutter.gradle主要作了三件事：（這個文件能夠在Flutter庫中的[flutter/packages/flutter_tools/gradle]目錄下能找到。）
1. 增長flutter.jar的依賴。
2. 插入Flutter Plugin的編譯依賴。
3. 插入Flutter工程的編譯任務，最終將產物（兩個isolaate_snapshot文件、兩個vm_snapshot文件和flutter_assets文件夾）拷貝到mergeAssets.outputDir，最終merge到APK的assets目錄下。

3.2.2 Android的Flutter依賴抽取實現

弄明白Flutter工程的Android編譯產物以後，所以咱們對Android的Flutter依賴抽取步驟以下：
1. 編譯Flutter工程。
這部分主要工做是編譯Flutter的dart和資源部分，能夠用AOT和Bundle命令編譯。

echo "Clean old build"
find . -d -name "build" | xargs rm -rf
./flutter/bin/flutter clean

echo "Get packages"
./flutter/bin/flutter packages get

echo "Build release AOT"
./flutter/bin/flutter build aot --release --preview-dart-2 --output-dir=build/flutteroutput/aot
echo "Build release Bundle"
./flutter/bin/flutter build bundle --precompiled --preview-dart-2 --asset-dir=build/flutteroutput/flutter_assets
複製代碼

2. 將flutter.jar和Flutter工程的產物打包成一個aar。
這邊部分的主要工做是將flutter.jar和第1步編譯的產物封裝成一個aar。
（1）添加flutter.jar依賴

project.android.buildTypes.each {
    addFlutterJarImplementationDependency(project, releaseFlutterJar)
}
project.android.buildTypes.whenObjectAdded {
    addFlutterJarImplementationDependency(project, releaseFlutterJar)
}

private static void addFlutterJarImplementationDependency(Project project, releaseFlutterJar) {
    project.dependencies {
        String configuration
        if (project.getConfigurations().findByName("implementation")) {
            configuration = "implementation"
        } else {
            configuration = "compile"
        }
        add(configuration, project.files {
            releaseFlutterJar
        })
    }
}
複製代碼

（2）Merge Flutter的產物到assets

// merge flutter assets
def allertAsset ="${project.projectDir.getAbsolutePath()}/flutter/assets/release"
Task mergeFlutterAssets = project.tasks.create(name: "mergeFlutterAssets${variant.name.capitalize()}", type: Copy) {
    dependsOn mergeFlutterMD5Assets
    from (allertAsset){
        include "flutter_assets/**" // the working dir and its files
        include "vm_snapshot_data"
        include "vm_snapshot_instr"
        include "isolate_snapshot_data"
        include "isolate_snapshot_instr"
    }
    into variant.mergeAssets.outputDir
}
variant.outputs[0].processResources.dependsOn(mergeFlutterAssets)
複製代碼

2. 同時將這個aar和Flutter Plugin編譯出來的aar一塊兒發佈到maven倉庫。
（1）發佈Flutter工程產物打包的aar

echo 'Clean packflutter input(flutter build)'
rm -f -r android/packflutter/flutter/
 # 拷貝flutter.jar
echo 'Copy flutter jar'
mkdir -p android/packflutter/flutter/flutter/android-arm-release && cp flutter/bin/cache/artifacts/engine/android-arm-release/flutter.jar "$_"
 # 拷貝asset
echo 'Copy flutter asset'
mkdir -p android/packflutter/flutter/assets/release && cp -r build/flutteroutput/aot/* "$_"
mkdir -p android/packflutter/flutter/assets/release/flutter_assets && cp -r build/flutteroutput/flutter_assets/* "$_"
 # 將flutter庫和flutter_app打成aar 同時publish到Ali-maven
echo 'Build and publish idlefish flutter to aar'
cd android
if [ -n "$1" ]
then
	./gradlew :packflutter:clean :packflutter:publish -PAAR_VERSION=$1
else
	./gradlew :packflutter:clean :packflutter:publish
fi
cd ../
複製代碼

（2）發佈Flutter Plugin的aar

# 將plugin發佈到Ali-maven
echo "Start publish flutter-plugins"
for line in $(cat .flutter-plugins)
do
    plugin_name=${line%%=*}
    echo 'Build and publish plugin:' ${plugin_name}
    
    cd android
    if [ -n "$1" ]
    then
		./gradlew :${plugin_name}:clean :${plugin_name}:publish -PAAR_VERSION=$1
	else
		./gradlew :${plugin_name}:clean :${plugin_name}:publish
	fi
	cd ../
done
複製代碼

3. 純粹的Native項目只須要compile咱們發佈到maven的aar便可。
平時開發階段，咱們須要實時能依賴最新的aar，因此咱們採用SNAPSHOT版本。

configurations.all {
    resolutionStrategy.cacheChangingModulesFor 0, 'seconds'
}

ext {
    flutter_aar_version = '6.0.2-SNAPSHOT'
}

dependencies {
    //flutter主工程依賴：包含基於flutter開發的功能、flutter引擎lib
    compile("com.taobao.fleamarket:IdleFishFlutter:${getFlutterAarVersion(project)}") {
        changing = true
    }
    //...其餘依賴
}

static def getFlutterAarVersion(project) {
    def resultVersion = project.flutter_aar_version
    if (project.hasProperty('FLUTTER_AAR_VERSION')) {
        resultVersion = project.FLUTTER_AAR_VERSION
    }
    return resultVersion
}
複製代碼

3.3 iOS依賴的Flutter庫的抽取

3.3.1 iOS中Flutter依賴文件如何產生

執行編譯命令「flutter build ios」，最終會執行Flutter的編譯腳本[xcode_backend.sh]，而這個腳本主要作了下面幾件事：
1. 獲取各類參數(如project_path，target_path，build_mode等），主要來自於Generated.xcconfig的各類定義。
2. 刪除Flutter目錄下的App.framework和app.flx。
3. 對比Flutter/Flutter.framework與{artifact_variant}目錄下的Flutter.framework，若不相等，則用後者覆蓋前者。
4. 獲取生成App.framework命令所需參數（build_dir，local_engine_flag，preview_dart_2_flag，aot_flags）。
5. 生成App.framework，並將生成的App.framework和AppFrameworkInfo.plist拷貝到XCode工程的Flutter目錄下。

3.3.2 iOS的Flutter依賴抽取實現

iOS的Flutter依賴的抽取步驟以下：
1. 編譯Flutter工程生成App.framework。

echo "===清理flutter歷史編譯==="
./flutter/bin/flutter clean

echo "===從新生成plugin索引==="
./flutter/bin/flutter packages get

echo "===生成App.framework和flutter_assets==="
./flutter/bin/flutter build ios --release
複製代碼

2. 打包各插件爲靜態庫。
這裏主要有兩步：一是將plugin打成二進制文件，二是將plugin的註冊入口打成二進制文件。

echo "===生成各個plugin的二進制庫文件==="
cd ios/Pods
#/usr/bin/env xcrun xcodebuild clean
#/usr/bin/env xcrun xcodebuild build -configuration Release ARCHS='arm64 armv7' BUILD_AOT_ONLY=YES VERBOSE_SCRIPT_LOGGING=YES -workspace Runner.xcworkspace -scheme Runner BUILD_DIR=../build/ios -sdk iphoneos
for plugin_name in ${plugin_arr}
do
    echo "生成lib${plugin_name}.a..."
    /usr/bin/env xcrun xcodebuild build -configuration Release ARCHS='arm64 armv7' -target ${plugin_name} BUILD_DIR=../../build/ios -sdk iphoneos -quiet
    /usr/bin/env xcrun xcodebuild build -configuration Debug ARCHS='x86_64' -target ${plugin_name} BUILD_DIR=../../build/ios -sdk iphonesimulator -quiet
    echo "合併lib${plugin_name}.a..."
    lipo -create "../../build/ios/Debug-iphonesimulator/${plugin_name}/lib${plugin_name}.a" "../../build/ios/Release-iphoneos/${plugin_name}/lib${plugin_name}.a" -o "../../build/ios/Release-iphoneos/${plugin_name}/lib${plugin_name}.a"
done

echo "===生成註冊入口的二進制庫文件==="
for reg_enter_name in "flutter_plugin_entrance" "flutter_service_register"
do
    echo "生成lib${reg_enter_name}.a..."
    /usr/bin/env xcrun xcodebuild build -configuration Release ARCHS='arm64 armv7' -target ${reg_enter_name} BUILD_DIR=../../build/ios -sdk iphoneos
    /usr/bin/env xcrun xcodebuild build -configuration Debug ARCHS='x86_64' -target ${reg_enter_name} BUILD_DIR=../../build/ios -sdk iphonesimulator
    echo "合併lib${reg_enter_name}.a..."
    lipo -create "../../build/ios/Debug-iphonesimulator/${reg_enter_name}/lib${reg_enter_name}.a" "../../build/ios/Release-iphoneos/${reg_enter_name}/lib${reg_enter_name}.a" -o "../../build/ios/Release-iphoneos/${reg_enter_name}/lib${reg_enter_name}.a"
done
複製代碼

3. 將這些上傳到遠程倉庫，並生成新的Tag。
4. 純Native項目只須要更新pod依賴便可。

##4. Flutter混合工程的持續集成流程 按上述方式，咱們就能夠解除Native工程對Flutter工程的直接依賴了，可是在平常開發中仍是存在一些問題：
1. Flutter工程更新，遠程依賴庫更新不及時。
2. 版本集成時，容易忘記更新遠程依賴庫，致使版本沒有集成最新Flutter功能。
3. 同時多條線並行開發Flutter時，版本管理混亂，容易出現遠程庫被覆蓋的問題。
4. 須要最少一名同窗持續跟進發布，人工成本較高。
鑑於這些問題，咱們引入了咱們團隊的CI自動化框架，從兩方面來解決：
（關於CI自動化框架，咱們後續會撰文分享）
一方面是自動化，經過自動化減小人工成本，也減小人爲失誤。
另外一方面是作好版本控制， 自動化的形式來作版本控制。
具體操做：
**首先，**每次須要構建純粹Native工程前自動完成Flutter工程對應的遠程庫的編譯發佈工做，整個過程不須要人工干預。
**其次，**在開發測試階段，採用五段式的版本號，最後一位自動遞增產生，這樣就能夠保證測試階段的全部並行開發的Flutter庫的版本號不會產生衝突。
**最後，**在發佈階段，採用三段式或四段式的版本號，能夠和APP版本號保持一致，便於後續問題追溯。

整個流程以下圖所示：

Standalone模式下構建流程

5. 最後

閒魚技術團隊是一隻短小精悍的工程技術團隊。咱們不只關注於業務問題的有效解決，同時咱們在推進打破技術棧分工限制（android/iOS/Html5/Server 編程模型和語言的統一）、計算機視覺技術在移動終端上的前沿實踐工做。做爲閒魚技術團隊的軟件工程師，您有機會去展現您全部的才能和勇氣，在整個產品的演進和用戶問題解決中證實技術發展是改變生活方式的動力。

簡歷投遞：guicai.gxy@alibaba-inc.com