問題引申 https://github.com/lianyagang/rnhabit
- 最近在開發(fā)RN腳手架襟雷，發(fā)現(xiàn)打包JSBundle給Android客戶端使用的時候藏斩，客戶端需要集成很多配置觅赊，如Node環(huán)境等
- 發(fā)現(xiàn)就算集成了Node環(huán)境，運行出來的效果也不一定跟前端開發(fā)的一樣狮惜，因為前端可能隨時更新Package.json。
-
如果Android本地沒有執(zhí)行前端腳本的package.json的yarn install柠傍，本地將可能缺失部分原生代碼庫辐啄，為什么會缺失原生代碼呢？因為RN執(zhí)行package.json的時候景鼠，會把依賴文件仲翎，下載到本地node_module 文件下。
而這部分代碼铛漓，是不會打包到j(luò)sbundle里面的
image.png
以上所帶來的后果會非常不方便開發(fā)階段的前端之間的交互溯香。甚至無法正常運行代碼∨ǘ瘢總之需要配置相當(dāng)多的環(huán)境玫坛。
如何優(yōu)雅的提供JS Bundle給客戶端使用
- 網(wǎng)上有個比較火的方案fat-aar-android
- 結(jié)合uploadArchives maven 發(fā)布資源進行合并
方案一
- 不是本文重點，我個人比較深度的使用了這個開源包晰，但是最后還是放棄了湿镀，因為我無法保證炕吸，合并之后的aar到底是否會有資源問題
方案二
- RN工程目錄的andorid project里面的build.gradle引入這么一句代碼
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
里面源碼介紹了，Android如何引用node_module內(nèi)部的android庫
/**
* Adds the react native modules as dependencies to the users `app` project
*/
void addReactNativeModuleDependencies(Project appProject) {
reactNativeModules.forEach { reactNativeModule ->
def nameCleansed = reactNativeModule["nameCleansed"]
appProject.dependencies {
// TODO(salakar): are other dependency scope methods such as `api` required?
implementation project(path: ":${nameCleansed}")
}
}
}
通過這句我們可以清晰的了解到勉痴，為啥run Rn的代碼赫模，會相關(guān)的也把android部分原生代碼也引入了。這里是一個重點蚀腿，請知悉嘴瓤，并做記
錄
-為了解決我們的痛點，這個時候采取的方案莉钙，就是把上述引入的project，全部達成maven倉庫筛谚，進行上傳磁玉。需要現(xiàn)在project下的build.gradle 配置如下
configure(subprojects.findAll {
(!it.name.startsWith('app'))
}) {
println ">>>>>>打包===${it.name}===<<<<<<"
apply from: "${rootDir}/publish_android.gradle"
}
這是直接動態(tài)給各個subProject注入發(fā)布腳本publish_android.gradle，內(nèi)容如下驾讲，也是放在project根目錄下蚊伞，
apply plugin: 'maven'
final def localMaven = true //true: 發(fā)布到本地maven倉庫， false： 發(fā)布到maven私服
final def artGroupId = project.POM_GROUP_ID
final def artVersion = project.VERSION_NAME
final def artifactId = project.ARID
if(artifactId == null || artVersion == null) {
return
}
uploadArchives {
repositories {
mavenDeployer {
if(localMaven) {
repository(url: uri('D:/repo-localuseAID'))
} else {
repository(url: MAVEN_URL) {
authentication(userName: MAVEN_ACCOUNT_NAME, password: MAVEN_ACCOUNT_PWD)
}
snapshotRepository(url: MAVEN_URL_SNAPSHOT) {
authentication(userName: MAVEN_ACCOUNT_NAME, password: MAVEN_ACCOUNT_PWD)
}
}
pom.groupId = artGroupId
pom.version = artVersion
pom.whenConfigured { pom ->
pom.dependencies.forEach { dep ->
if (dep.getVersion() == "unspecified") {
println("--modify the dependenies module in pom.xml--->>" + dep.getArtifactId())
dep.setGroupId(artGroupId)
dep.setVersion(artVersion)
}
}
}
pom.project {
licenses {
license {
name 'The Apache Software License, artVersion 2.0'
url 'http://www.apache.org/licenses/LICENSE-2.0.txt'
}
}
}
}
}
}
以上是配置所有依賴項目的自動打包吮铭，接下來需要說明如何把jsbundle一起打包進行發(fā)布时迫，并且依賴剛才我們剛才自動注入打包的maven
打最終版本包，重新梳理接入流程
- RN功能android目錄下谓晌，新建rn_lib 工程
- RN執(zhí)行打包腳本掠拳，會把bundle、res輸出到rn_lib工程
"bundle-android": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform android --dev false --bundle-output android/rn_lib/src/main/assets/index.android.bundle --assets-dest android/rn_lib/src/main/res"
3.新建publish_android.gradle并 配置 project下 build.gradle 動態(tài)注入打aar包腳本
4.控制臺執(zhí)行
gradlew uploadArchives
或者
打包腳本如果對前端不夠友好纸肉，也可以自定義sh腳本rn.sh
gradlew uploadArchives
在gitbash控制臺執(zhí)行
sh rn.sh
等待發(fā)布成功~搞定溺欧，最后直接提供rn_lib的maven倉庫就可以了
寫在最后，RN有兩個庫柏肪，需要手動上傳maven姐刁，我就是這么做滴
implementation "com.facebook.react:react-native:+"
implementation 'org.webkit:android-jsc:+'
這兩個庫，無法在JCenter或者Maven上面找到烦味。只能在本地node_module找到相關(guān)代碼或者aar上傳
伸手黨專屬聂使，我正在發(fā)布demo
fat-aar-android
fat-aar-android
