React Native開發中自動打包腳本

React Native開發中自動打包腳本

在平常的RN開發中，咱們避免不了須要將咱們編寫的代碼編譯成安裝包，而後生成二維碼，供須要測試的人員掃描下載。可是對於非原生的開發人員來講，可能不知如何使用Xcode或者Android studio來導出ipa、apk安裝包，爲了解決非原生開發的同窗們打安裝包的痛苦，這裏做者就提供一個shell腳本文件來實現一鍵式自動打包並生成安裝二維碼 (這裏上傳安裝包生成二維碼須要藉助於三方平臺fir.im)

打包腳本文件下載地址

https://github.com/guangqiang-liu/AutoPackageScript

iOS

腳本執行效果

gif

使用腳本注意事項

• 腳本配置環境變量中，is_workspace ：若是是使用pod進行管理三方庫就賦值爲true，不然是false
• firim_token：fir_token請設置成本身的token，fir im_token如何獲取請參考fir官網https://fir.im/
• scheme_name：請更換爲本身項目的scheme名稱
• info_plist_name：請更換爲本身項目中的plist文件名稱
• 若是沒有註冊登陸fir.im的同窗們，請先去註冊登陸fir.im，相關操做請參照fir.im官方文檔
• 腳本文件夾放在項目的跟目錄下便可
• 除了is_workspace firim_token scheme_name info_plist_name 這四個變量須要改成本身的，其它的地方腳本不須要修改
• 在打包以前請確保iOS調試證書有效
• fir.im 的token和註冊登陸流程是無關緊要的，若是以前沒有使用過fir.im的同窗們也能夠忽略fir.im相關的操做，由於fir.im只是輔助將生成的ipa安裝包文件上傳到fir, 而後生成一個能夠掃碼安裝的二維碼而已，不使用fir.im 不影響生成ipa，只是不會生成安裝二維碼

特別注意（腳本存放路徑）：

img

如何使用腳本文件

• 將下載下來的腳本文件夾整個拖進本身的iOS工程的項目根目錄下
• 打開終端，進入到腳本文件 autoPackageScript.sh 所在的目錄
• 執行腳本 sh autoPackageScript.sh
• 等待打包生成ipa和二維碼，這裏默認打包後的文件會存放在桌面

核心腳本代碼

#!/bin/sh # autoPackageScript.sh # LSBuyer # # Created by 劉光強 on 2017/6/3. # Copyright © 2017年 Facebook. All rights reserved. envionmentVariables() { # ==================== 工程配置環境變量 ==================== # echo "\033[37;45m************************* step1:初始化環境變量 🚀 🚀 🚀 ************************* \033[0m" sleep 0.5 # 計時 SECONDS=0 # 工做空間 (例:如果用Cocopods管理的.xcworkspace項目,賦值true;用Xcode默認建立的.xcodeproj,賦值false) is_workspace="false" # 指定要打包編譯的方式 : Release or Debug (默認是Release) build_configuration="Release" # fir帳戶的token, 這個token換成本身fir帳號生成的token便可 firim_token="1b91e3f54c6e6b106be7afdd13674a43" # 打包腳本文件夾路徑 script_path=$(pwd) # 指定項目的scheme名稱（默認爲one，須要再次賦值） scheme_name="one" # 工程中Target對應的配置plist文件名稱, Xcode默認的配置文件爲info.plist (須要再次賦值) info_plist_name="info" # 導出ipa所須要的對應的plist文件路徑 (默認爲EnterpriseExportOptionsPlist.plist) ExportOptionsPlistPath="$script_path/EnterpriseExportOptionsPlist.plist" # 返回上上級目錄,進入項目工程根目錄 cd .. cd .. # 工程根目錄 project_dir=$(pwd) # 獲取工程名稱（LSBuyer） project_name=`find . -name *.xcodeproj | awk -F "[/.]" '{print $(NF-1)}'` # Dev,Pre,Pro三種環境 echo "\033[31;1m請選擇打包類型(輸入序號,按回車便可) \033[0m" echo "\033[31;1m1. 測試 \033[0m" echo "\033[31;1m2. 預發 \033[0m" echo "\033[31;1m3. 生產 \033[0m" # 捕獲用戶鍵盤輸入 read packageType sleep 0.5 method="$packageType" # 判斷用戶是否有輸入 if [ -n "$method" ] ; then if [ "$method" = "1" ] ; then ExportOptionsPlistPath="$script_path/EnterpriseExportOptionsPlist.plist" # 根據用戶選擇的打包類型來設置對應的scheme和plist文件 scheme_name="one" info_plist_name="info" elif [ "$method" = "2" ] ; then ExportOptionsPlistPath="$script_path/EnterpriseExportOptionsPlist.plist" scheme_name="LSBuyerPre" info_plist_name="LSBuyerPre" elif [ "$method" = "3" ] ; then ExportOptionsPlistPath="$script_path/AppStoreExportOptionsPlist.plist" scheme_name="LSBuyer" info_plist_name="Info" else echo "\033[37;45m************************* 你是否是瞎，是否是瞎 😢 😢 😢 ************************* \033[0m" exit 1 fi fi # 獲取對應的plist文件 info_plist_path="$project_dir/$project_name/$info_plist_name.plist" # 對應plist中的Bundle versions string, short bundle_short_version=`/usr/libexec/PlistBuddy -c "Print CFBundleShortVersionString" "$info_plist_path"` # 對應plist中的Bundle version bundle_version=`/usr/libexec/PlistBuddy -c "Print CFBundleVersion" "$info_plist_path"` # 指定輸出ipa文件夾路徑 (須要再次賦值) export_path=~/Desktop/$scheme_name-IPA # 指定輸出xcarchive路徑 export_archive_path="$export_path/$scheme_name.xcarchive" # 刪除舊.xcarchive文件 rm -rf "$export_archive_path" # 指定輸出ipa路徑 export_ipa_path="$export_path" # 指定輸出ipa名稱 : scheme_name + bundle_short_version (須要從新賦值) ipa_name="$scheme_name-v$bundle_short_version" } Xcodebuild() { echo "\033[37;45m************************* step2:開始構建項目 🚀 🚀 🚀 ************************* \033[0m" sleep 1 if [ -d "$export_path" ]; then echo $export_path else mkdir $export_path fi # 判斷編譯的項目類型是workspace仍是project if $is_workspace ; then # 編譯前作clear操做 xcodebuild clean -workspace ${project_name}.xcworkspace \ -scheme ${scheme_name} \ -configuration ${build_configuration} # archive操做 xcodebuild archive -workspace ${project_name}.xcworkspace \ -scheme ${scheme_name} \ -configuration ${build_configuration} \ -archivePath ${export_archive_path} else xcodebuild clean -project ${project_name}.xcodeproj \ -scheme ${scheme_name} \ -configuration ${build_configuration} xcodebuild archive -project ${project_name}.xcodeproj \ -scheme ${scheme_name} \ -configuration ${build_configuration} \ -archivePath ${export_archive_path} fi # 檢查是否構建成功 # xcarchive 是一個文件夾不是一個文件因此使用 -d 判斷 if [ -d "$export_archive_path" ] ; then echo "\033[37;45m項目構建成功 🚀 🚀 🚀 \033[0m" else echo "\033[37;45m項目構建失敗 😢 😢 😢 \033[0m" exit 1 fi } ExportArchive() { echo "\033[37;43m************************* step3:開始導出ipa文件 🚀 🚀 🚀 ************************* \033[0m" sleep 0.5 # 導出ipa xcodebuild -exportArchive \ -archivePath ${export_archive_path} \ -exportPath ${export_ipa_path} \ -exportOptionsPlist ${ExportOptionsPlistPath} # 修改ipa文件名稱 mv $export_ipa_path/$scheme_name.ipa $export_ipa_path/$ipa_name.ipa # 檢查文件是否存在 if [ -f "$export_ipa_path/$ipa_name.ipa" ] ; then echo "\033[37;45m導出 ${ipa_name}.ipa 包成功 🎉 🎉 🎉 \033[0m" else echo "\033[37;45m導出 ${ipa_name}.ipa 包失敗 😢 😢 😢 \033[0m" exit 1 fi # 輸出打包總用時 echo "\033[37;46m總用時: ${SECONDS}s \033[0m" open $export_path } previewIPAInfo() { echo "\033[37;43m************************* step4:預覽IPA信息 💩 💩 💩 ************************* \033[0m" fir info $export_ipa_path/$ipa_name.ipa } publishIPAToFir() { echo "\033[37;43m************************* step5:上傳中 🚀 🚀 🚀 ************************* \033[0m" echo "\033[37;43m************************* step4:預覽用戶登陸信息 💩 💩 💩 ************************* \033[0m" fir login "$firim_token" fir publish $export_ipa_path/$ipa_name.ipa -Q echo "\033[37;43m************************* step6:上傳完成 🚀 🚀 🚀 ************************* \033[0m" # 輸出總用時 echo "\033[37;46m總用時: ${SECONDS}s 👄 👄 👄 \033[0m" open $export_path } envionmentVariables Xcodebuild ExportArchive previewIPAInfo publishIPAToFir 

Android

執行腳本效果

gif

注意事項

• 環境配置項中的 firim_token：換成本身的token
• fir.im的註冊與登陸操做同iOS操做，詳細參考fir.im官方文檔 教程
• apk默認導出路徑爲：app/build/outputs/apk
• 打包前請確保jks簽名是否有效，若是有對生成 jks 簽名文件不熟悉的同窗，請查看做者對生成jks簽名文件的講解：https://www.jianshu.com/p/b28a5be05029
• 腳本文件存放的路徑，最好放在項目根目錄下，也便是與 settings.gradle 文件同級目錄
• fir.im 的token和註冊登陸流程是無關緊要的，若是以前沒有使用過fir.im的同窗們也能夠忽略fir.im相關的操做，由於fir.im只是輔助將生成的ipa安裝包文件上傳到fir, 而後生成一個能夠掃碼安裝的二維碼而已，不使用fir.im 不影響生成ipa，只是不會生成安裝二維碼

img

如何運行腳本

• 將下載的腳本文件夾中的 autoPackage.sh 文件 拖到Android 項目的根目錄下
• 打開終端，進入到 autoPackage.sh 腳本文件所在的目錄
• 執行腳本 sh autoPackage.sh
• 等待腳本執行，打包生成的apk文件與二維碼統一存放在 /build/outputs/apk 路徑下

核心腳本代碼

#!/bin/sh # autoPackage.sh # CRM # # Created by 劉光強 on 2017/6/19. # Copyright © 2017年 Facebook. All rights reserved. # ******************** 安卓一鍵式打包並上傳到fir生成二維碼並直接掃描安裝 ******************** # 預先定義對應的環境變量 envionmentVariables(){ # 打包時間初始值 SECONDS=0 # 當前的路徑 pwd #安卓項目工程路徑 android_project_path=$(pwd) # 安卓apk目錄路徑 apk_dir_path="$android_project_path/app/build/outputs/apk" # apk 路徑 apk_path="$apk_dir_path/app-dev-release.apk" # fir帳戶的token,這個token換成本身fir帳號生成的token便可 firim_token="1b91e3f54c6e6b106be7afdd13674a43" } apkBuild(){ # 刪除老的apk rm -rf $apk_path cd "$android_project_path" echo "\033[37;45m打包開始！！！ 🎉 🎉 🎉 \033[0m" sleep 1 # 執行安卓打包腳本 ./gradlew assembleRelease # 檢查apk文件（app-LSW-release.apk）是否存在 if [ -f "$apk_path" ]; then echo "$apk_path" echo "\033[37;45m打包成功 🎉 🎉 🎉 \033[0m" sleep 1 else echo "\033[37;45m沒有找到對應的apk文件 😢 😢 😢 \033[0m" exit 1 fi } # 預覽apk信息 previewIPAInfo(){ echo "\033[37;43m************************* step4:預覽apk信息 💩 💩 💩 ************************* \033[0m" fir info $apk_path sleep 1 } # 將apk目錄下的app-LSW-release.apk 上傳到fir publishIPAToFir(){ open $apk_dir_path echo "\033[37;43m************************* step5:上傳中 🚀 🚀 🚀 ************************* \033[0m" echo "\033[37;43m************************* step4:預覽用戶登陸信息 💩 💩 💩 ************************* \033[0m" fir login "$firim_token" fir publish $apk_path -Q echo "\033[37;43m************************* step6:上傳完成 🚀 🚀 🚀 ************************* \033[0m" # 輸出總用時 echo "\033[37;46m總用時: ${SECONDS}s 👄 👄 👄 \033[0m" open $apk_dir_path } envionmentVariables apkBuild previewIPAInfo publishIPAToFir 

待完成

• 將打包腳本與Jenkins結合實現動態構建

更多文章

• 做者React Native開源項目OneM【500+ star】地址(按照企業開發標準搭建框架完成開發的)：https://github.com/guangqiang-liu/OneM：歡迎小夥伴們 star
• 做者簡書主頁：包含60多篇RN開發相關的技術文章http://www.jianshu.com/u/023338566ca5歡迎小夥伴們：多多關注，多多點贊
• 做者React Native QQ技術交流羣：620792950 歡迎小夥伴進羣交流學習
• 友情提示：在開發中有遇到RN相關的技術問題，歡迎小夥伴加入交流羣（620792950），在羣裏提問、互相交流學習。交流羣也按期更新最新的RN學習資料給你們，謝謝你們支持！

小夥伴們掃下方二維碼加入RN技術交流QQ羣

QQ羣二維碼，500+ RN工程師在等你加入哦