【react native】解放双手,fastlane自动化打包,提效200%

2,291 阅读6分钟

一、前言

react native打包是一件比较复杂的事情,相对于原生android,ios来讲,首先你可能需要在每次打包之前要重新生成bundlejs文件,否则可能新修改的代码不会生效,其次,在生成jsbundle的过程中可能会生成一些无用的node开头的资源,打包之前需要删除。

另外需要分别对ios和android进行打包,ios打包完成后还需要上传到三方托管平台,供测试扫码下载,随着项目的不断迭代,打包耗时越来越长,步骤繁杂,如果能把这些步骤整合,自动化依次执行,一行命令打包上传到蒲公英或者fir等托管平台,岂不美哉,好巧不巧,Fastlane就可以做到。

二、基础使用

使用 Fastlane 是一种自动化打包和部署 React Native 项目的好方式。Fastlane 是一个用 Ruby 编写的工具集,可以简化移动应用的构建、测试和部署过程。下面是一个使用 Fastlane 实现 React Native 项目一键打包和部署的简单步骤:

1.环境安装

安装Xcode command line tools
xcode-select --install
安装ruby
brew install ruby
安装fastlane
sudo gem install fastlane -NV

2.初始化项目

cd到项目目录,执行fastlane init命令

fastlane init

我在项目根目录实际操作中发现会报找不到ios目录的问题,如果你也有此问题,或许你可以cd到my-project/ios目录下执行fastlane init命令,实践来看,在ios目录下执行后,把fastlane生成的文件移动到项目根目录即可。

如果在ios目录执行,可能需要你输入apple开发账号等信息,根据提示输入即可。

这个时候项目根目录下会出现fastlane文件夹,里面会有AppfileFastfile文件。

fastlane init是Fastlane提供的一个命令行工具,可以帮助开发人员快速创建Fastfile文件和其他必要的配置文件,从而简化Fastlane的配置过程。

  • Fastfile:这是Fastlane的核心配置文件,包含了任务定义和配置信息。使用fastlane init命令创建的Fastfile包含了一些示例任务和配置信息,可以根据需要进行修改和扩展。
  • Appfile:这个文件包含了应用程序的相关信息,例如Bundle ID和Apple Developer账户信息。使用fastlane init命令创建的Appfile会询问用户输入这些信息,并将其保存到文件中。
  • Deliverfile:这个文件包含了使用Deliver上传应用程序到App Store的配置信息。使用fastlane init命令创建的Deliverfile包含了一些示例配置信息,可以根据需要进行修改和扩展。
  • Gymfile:这个文件包含了使用Gym构建应用程序的配置信息。使用fastlane init命令创建的Gymfile包含了一些示例配置信息,可以根据需要进行修改和扩展。
  • Matchfile:这个文件包含了使用Match管理代码签名和证书的配置信息。使用fastlane init命令创建的Matchfile包含了一些示例配置信息,可以根据需要进行修改和扩展。
  • Screengrabfile:这个文件包含了使用Screengrab进行应用程序截图的配置信息。使用fastlane init命令创建的Screengrabfile包含了一些示例配置信息,可以根据需要进行修改和扩展。
  • Supplyfile:这个文件包含了使用Supply上传应用程序到Google Play的配置信息。使用fastlane init命令创建的Supplyfile包含了一些示例配置信息,可以根据需要进行修改和扩展。

3. 编辑 Fastfile 文件,以下是个模板,可根据自身项目进行简单修改

# This file contains the fastlane.tools configuration
# You can find the documentation at https://docs.fastlane.tools
#
# For a list of all available actions, check out
#
#     https://docs.fastlane.tools/actions
#
# For a list of all available plugins, check out
#
#     https://docs.fastlane.tools/plugins/available-plugins
#

pyger_api_key = "xxxxx" # 替换成你蒲公英账号的api_key

before_all do
  # 在lane执行前运行
end

# 打包ios
platform :ios do
  desc "打包ios并上传"
  lane :publish do
    # 重新生成jsbundle包
    sh("yarn bundle-ios")

    # 选择上传地址,这里是测试包导出,所以选择ad-hoc
    export_method = "ad-hoc"
    upload = "pgyer"
    upload = UI.select("选择上传地址:", ["pgyer", "fir"])

    scheme_name = "schemName" # 替换成你的ios项目要打包的scheme名称

    project = "./ios/schemName.xcodeproj"
  
    # build加1
    increment_build_number(xcodeproj: project)
    # 获取最新的build号码
    build_number = get_build_number(xcodeproj: project)
    # 获取应用版本号
    versoin_number = get_version_number(
      xcodeproj: project,
      target: scheme_name
    )
    # 拼接打包文件名称
    output_name = "#{scheme_name}_#{versoin_number}_#{build_number}_#{Time.now.strftime('%Y%m%d%H%M%S')}.ipa"

    # 打包
    gym( # build_app的别名
      workspace: "./ios/schemName.xcworkspace", 
      scheme: scheme_name, 
      export_method: export_method, 
      output_directory: "./ios/build",
      output_name: output_name,
      clean: true, # 每次打包前清理项目
      suppress_xcode_output: true, # 打包过程中不显示xcode的输出信息
    )

    # 上传到蒲公英或fir
    if upload === "fir"
      fir_cli api_token: "xxxxx",  changelog: "Hello 我是ios包"
      notification(subtitle: "打包成功!", message: "ios打包成功,上传fir成功!")
    else
      pgyer(api_key: pyger_api_key)
      notification(subtitle: "打包成功!", message: "ios打包成功,上传pgyer成功!")
    end
  end
end

# 打包android
platform :android do
  desc "打包android并上传到蒲公英或fir"
  lane :publish do
    upload = "pgyer"
    upload = UI.select("选择上传地址:", ["pgyer", "fir"])
    # 重新生成jsbundle资源包
    sh("yarn bundle-android")  
    sleep(1)
    desc "------清理无用资源完成-----"
    project_dir = "./android/"
  
    gradle(task: 'clean', project_dir: project_dir) # 清理
    gradle(
      task: 'assemble', 
      build_type: 'Release', 
      project_dir: project_dir,
      print_command: false,
      # 配置android签名信息
      properties: {
        "android.injected.signing.store.file" => "/path/path/test.keystore",
        "android.injected.signing.store.password" => "keystore_password",
        "android.injected.signing.key.alias" => "aliasName",
        "android.injected.signing.key.password" => "alias_password",
      }
    )
    
    if upload === "fir" #上传到fir
      fir_cli api_token: "xxxxx",  changelog: "Hello 我是android包"
      notification(subtitle: "打包成功!", message: "android打包成功,上传fir成功!")
    else
      pgyer(api_key: pyger_api_key) # 上传到蒲公英
      notification(subtitle: "打包成功!", message: "android打包成功,上传蒲公英成功!")
    end
  end
end

after_all do
  # 在lane执行后运行
end

在项目根目录执行fastlane android publish和fastlane ios publish既可以分别对android和ios平台进行打包,并自动上传蒲公英或者fir。

image.png

4.上传蒲公英或者fir配置

蒲公英上传配置

运行命令,安装蒲公英fastlane插件

fastlane add_plugin pgyer

Fastfile中添加如下代码即可自动上传:

pgyer(api_key: pyger_api_key) # 上传到蒲公英

蒲公英apikey查看:

image.png

fir上传配置

运行命令,安装fir fastlane插件

fastlane add_plugin fir_cli

Fastfile中添加如下代码即可自动上传:

fir_cli api_token: "xxxx",  changelog: "Hello 我是android包"

fir api_token查看:

image.png

5.注意事项

一旦配置完成,发现打包就是一个命令的事,比起之前节省了不少时间,本文针对的是react native项目,如果是纯android或原生ios,大家可以自行测试,理论上只要合理使用,对于打包效率都会有所提升。

如果想要删除项目中的某些资源,可以使用如下命令,路径需要完整路径:

sh('rm /Users/zhangsan/Desktop/VSWork/project-name-rn/android/app/src/main/res/drawable-hdpi/test.png')

举一反三,其实很多命令都可在这里执行,比如操作文件,移动文件等等,大家可以自由探索,另外fastfile脚本用的ruby语言,有兴趣的可以自行探索,开发自己的action或者插件使用,以便解放双手。

fastlane社区提供了很多插件和action可用,可以去docs.fastlane.tools/actionsdocs.fastlane.tools/plugins/ava…查阅使用。

官方文档:docs.fastlane.tools/