問題引申 https://github.com/lianyagang/rnhabit
- 最近在開發(fā)RN腳手架，發(fā)現(xiàn)打包JSBundle給Android客戶端使用的時(shí)候，客戶端需要集成很多配置，如Node環(huán)境等
- 發(fā)現(xiàn)就算集成了Node環(huán)境，運(yùn)行出來的效果也不一定跟前端開發(fā)的一樣，因?yàn)榍岸丝赡茈S時(shí)更新Package.json。
-
如果Android本地沒有執(zhí)行前端腳本的package.json的yarn install，本地將可能缺失部分原生代碼庫，為什么會(huì)缺失原生代碼呢？因?yàn)镽N執(zhí)行package.json的時(shí)候，會(huì)把依賴文件，下載到本地node_module 文件下。
而這部分代碼，是不會(huì)打包到j(luò)sbundle里面的
image.png
以上所帶來的后果會(huì)非常不方便開發(fā)階段的前端之間的交互。甚至無法正常運(yùn)行代碼?？傊枰渲孟喈?dāng)多的環(huán)境。
如何優(yōu)雅的提供JS Bundle給客戶端使用
- 網(wǎng)上有個(gè)比較火的方案fat-aar-android
- 結(jié)合uploadArchives maven 發(fā)布資源進(jìn)行合并
方案一
- 不是本文重點(diǎn)，我個(gè)人比較深度的使用了這個(gè)開源，但是最后還是放棄了，因?yàn)槲覠o法保證，合并之后的aar到底是否會(huì)有資源問題
方案二
- 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的代碼，會(huì)相關(guān)的也把a(bǔ)ndroid部分原生代碼也引入了。這里是一個(gè)重點(diǎn)，請(qǐng)知悉，并做記
錄
-為了解決我們的痛點(diǎn)，這個(gè)時(shí)候采取的方案，就是把上述引入的project，全部達(dá)成maven倉庫，進(jìn)行上傳。需要現(xiàn)在project下的build.gradle 配置如下
configure(subprojects.findAll {
(!it.name.startsWith('app'))
}) {
println ">>>>>>打包===${it.name}===<<<<<<"
apply from: "${rootDir}/publish_android.gradle"
}
這是直接動(dòng)態(tài)給各個(gè)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'
}
}
}
}
}
}
以上是配置所有依賴項(xiàng)目的自動(dòng)打包，接下來需要說明如何把jsbundle一起打包進(jìn)行發(fā)布，并且依賴剛才我們剛才自動(dòng)注入打包的maven
打最終版本包，重新梳理接入流程
- RN功能android目錄下，新建rn_lib 工程
- RN執(zhí)行打包腳本，會(huì)把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 動(dòng)態(tài)注入打aar包腳本
4.控制臺(tái)執(zhí)行
gradlew uploadArchives
或者
打包腳本如果對(duì)前端不夠友好，也可以自定義sh腳本rn.sh
gradlew uploadArchives
在gitbash控制臺(tái)執(zhí)行
sh rn.sh
等待發(fā)布成功~搞定，最后直接提供rn_lib的maven倉庫就可以了
寫在最后，RN有兩個(gè)庫，需要手動(dòng)上傳maven，我就是這么做滴
implementation "com.facebook.react:react-native:+"
implementation 'org.webkit:android-jsc:+'
這兩個(gè)庫，無法在JCenter或者M(jìn)aven上面找到。只能在本地node_module找到相關(guān)代碼或者aar上傳
伸手黨專屬，我正在發(fā)布demo
fat-aar-android
fat-aar-android
