1. 引言
本文重點來講一講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]目錄下能找到。）
- 增加flutter.jar的依賴。
- 插入Flutter Plugin的編譯依賴。
- 插入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]，而這個腳本主要做了下面幾件事：
- 獲取各種參數(如project_path，target_path，build_mode等），主要來自于Generated.xcconfig的各種定義。
- 刪除Flutter目錄下的App.framework和app.flx。
- 對比Flutter/Flutter.framework與
{artifact_variant}目錄下的Flutter.framework，若不相等，則用后者覆蓋前者。
- 獲取生成App.framework命令所需參數（build_dir，local_engine_flag，preview_dart_2_flag，aot_flags）。
- 生成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工程的直接依賴了，但是在日常開發中還是存在一些問題：
- Flutter工程更新，遠程依賴庫更新不及時。
- 版本集成時，容易忘記更新遠程依賴庫，導致版本沒有集成最新Flutter功能。
- 同時多條線并行開發Flutter時，版本管理混亂，容易出現遠程庫被覆蓋的問題。
- 需要最少一名同學持續跟進發布，人工成本較高。
鑒于這些問題，我們引入了我們團隊的CI自動化框架，從兩方面來解決：
（關于CI自動化框架，我們后續會撰文分享）
一方面是自動化，通過自動化減少人工成本，也減少人為失誤。
另一方面是做好版本控制， 自動化的形式來做版本控制。
具體操作：
首先，每次需要構建純粹Native工程前自動完成Flutter工程對應的遠程庫的編譯發布工作，整個過程不需要人工干預。
其次，在開發測試階段，采用五段式的版本號，最后一位自動遞增產生，這樣就可以保證測試階段的所有并行開發的Flutter庫的版本號不會產生沖突。
最后，在發布階段，采用三段式或四段式的版本號，可以和APP版本號保持一致，便于后續問題追溯。
整個流程如下圖所示：
最后
給大家分享一份移動架構大綱，包含了移動架構師需要掌握的所有的技術體系，大家可以對比一下自己不足或者欠缺的地方有方向的去學習提升；
需要高清架構圖以及圖中視頻資料和文章項目源碼的可以加入我的技術交流群：825106898私聊群主小姐姐免費獲取
