问题引申 https://github.com/lianyagang/rnhabit
- 最近在开发RN脚手架,发现打包JSBundle给Android客户端使用的时候,客户端需要集成很多配置,如Node环境等
- 发现就算集成了Node环境,运行出来的效果也不一定跟前端开发的一样,因为前端可能随时更新Package.json。
-
如果Android本地没有执行前端脚本的package.json的yarn install,本地将可能缺失部分原生代码库,为什么会缺失原生代码呢?因为RN执行package.json的时候,会把依赖文件,下载到本地node_module 文件下。
而这部分代码,是不会打包到jsbundle里面的
以上所带来的后果会非常不方便开发阶段的前端之间的交互。甚至无法正常运行代码。总之需要配置相当多的环境。
如何优雅的提供JS Bundle给客户端使用
- 网上有个比较火的方案fat-aar-android
- 结合uploadArchives maven 发布资源进行合并
方案一
- 不是本文重点,我个人比较深度的使用了这个开源,但是最后还是放弃了,因为我无法保证,合并之后的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内部的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的代码,会相关的也把android部分原生代码也引入了。这里是一个重点,请知悉,并做记
录
-为了解决我们的痛点,这个时候采取的方案,就是把上述引入的project,全部达成maven仓库,进行上传。需要现在project下的build.gradle 配置如下
configure(subprojects.findAll {
(!it.name.startsWith('app'))
}) {
println ">>>>>>打包===${it.name}===<<<<<<"
apply from: "${rootDir}/publish_android.gradle"
}
这是直接动态给各个subProject注入发布脚本publish_android.gradle,内容如下,也是放在project根目录下,
apply plugin: 'maven'
final def localMaven = true //true: 发布到本地maven仓库, false: 发布到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一起打包进行发布,并且依赖刚才我们刚才自动注入打包的maven
打最终版本包,重新梳理接入流程
- RN功能android目录下,新建rn_lib 工程
- RN执行打包脚本,会把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 动态注入打aar包脚本
4.控制台执行
gradlew uploadArchives
或者
打包脚本如果对前端不够友好,也可以自定义sh脚本rn.sh
gradlew uploadArchives
在gitbash控制台执行
sh rn.sh
等待发布成功~搞定,最后直接提供rn_lib的maven仓库就可以了
写在最后,RN有两个库,需要手动上传maven,我就是这么做滴
implementation "com.facebook.react:react-native:+"
implementation 'org.webkit:android-jsc:+'
这两个库,无法在JCenter或者Maven上面找到。只能在本地node_module找到相关代码或者aar上传
伸手党专属,我正在发布demo
fat-aar-android
fat-aar-android