rn打包配置分析(基于rn0.77)

120 阅读8分钟
"start": "react-native start"
"start:test": "APP_ENV=test react-native start"
"start:dev": "APP_ENV=dev react-native start"
"start:hot": "APP_ENV=hot react-native start --experimental-debugger --reset-cache"
"start:pre": "APP_ENV=pre react-native start --experimental-debugger --reset-cache"
"start:prod": "APP_ENV=prod react-native start --experimental-debugger --reset-cache"

命令分析:
1.start    启动reactNative的打包服务器(Metro)
2.start:*    指定不同的环境变量APP_ENV,可用于加载不同的配置,如.env.dev
3.--experimental-debugger    启用实验调试器(通常用于调试大型项目)
4.--reset-cache    清楚Metro缓存, 解决缓存问题(推荐每次切换环境清缓存)
"android": "react-native run-android"
"ios": "react-native run-ios"

命令分析:
1.启动模拟器并安装当前项目到Android/ios设备上
2.要求系统已经配置好Android或者Xcode环境
"build-android": "./scripts/packages-android.sh"
"build-android-dev": "./scripts/packages-android.sh dev"
"build-android-hot": "./scripts/packages-android.sh hot"
"build-android-pre": "./scripts/packages-android.sh pre"
"build-android-stop": "./scripts/packages-android.sh stop"
"build-android-prod": "./scripts/packages-android.sh prod noclear"


"build-ios": "./scripts/packages-ios.sh"
"build-ios-dev": "./scripts/packages-ios.sh dev"
"build-ios-hot": "./scripts/packages-ios.sh hot"
"build-ios-pre": "./scripts/packages-ios.sh pre"
"build-ios-stop": "./scripts/packages-ios.sh stop"
"build-ios-prod": "./scripts/packages-ios.sh prod noclear"

命令分析:
这些脚本文件是你项目里自定义的构建打包脚本:
1.Android打包    build-android-dev    打包Android dev环境的APK
2.iOS打包        buid-ios-prod        打包iOS prod环境的IPA文件
3.stop           停止打包任务(可能是终止构建过程)    
4.noclear        不清理缓存打包,保留上一次构建的缓存,加快构建速度

/*还需要分析命令*/
登录+选择应用
"pushy:login": "pushy login"
"pushy:select:android": "pushy selectApp --platform android"
"pushy:select:ios": "pushy selectApp --platform ios"


上传源安装包:
"pushy:source:android": "pushy uploadApk android/app/build/outputs/apk/release/app-release.apk"
"pushy:source:ios": "pushy uploadIpa ios/build/rn-upload-app-temp/main_platform_app.ipa"

构建并上传热更新bundle
"pushy:update:android:equality": "BUILD_MODULE=equality pushy bundle --platform android"
"pushy:update:android:supply": "BUILD_MODULE=supply pushy bundle --platform android"
"pushy:update:android:all": "BUILD_MODULE=all pushy bundle --platform android"
"pushy:update:ios:equality": "BUILD_MODULE=equality pushy bundle --platform ios"
"pushy:update:ios:supply": "BUILD_MODULE=supply pushy bundle --platform ios"
"pushy:update:ios:all": "BUILD_MODULE=all pushy bundle --platform ios"
"pushy:update:android": "pushy bundle --platform android"
"pushy:update:ios": "pushy bundle --platform ios"

版本查看
"pushy:versions": "pushy versions"


说明:
BUILD_MODULE变量用于构建不同模块的热更新
可按平台,模块,全量分别上传更新
pushy是ReactNative热更新服务的cli工具

// 等待进一步分析
"lint": "eslint ."
"lint:lint-staged": "lint-staged"
"test": "jest"
"prepare": "husky"
"postinstall": "patch-package"


命令分析:
lint        全项目ESLint检查
lint:lint-staged        配置husky钩子,只检查暂存区修改的文件
test                    运行Jest单元测试    // 不需要
prepare                 安装阶段执行,用于激活husky钩子
postintall              安装依赖后自动执行patch-package打补丁
"asset": "npx react-native-asset"
"compress": "node scripts/imageCompress.js"

命令分析:
1. react-native-asset: 将字体,图片等资源自动链接到原生模块中
2.compress:            运行你写的图片压缩脚本,可能基于tinify Api 批量压缩图片资源
"setLogUrl": "./scripts/logUrlPath.sh"

自定义脚本,可能是配置或者注入日志上报路径
"husky": {
        "hooks": {
                "pre-commit": "lint:lint-staged",
                "commit-msg": "commitlint"
        }
}


说明:
    钩子:
    pre-commit                     提交前只检查当前改动的文件格式(通过prettier)
    commit-msg                     校验commit message   格式是否符合规范(如 feat, fix, chore等)
husky                            git钩子函数
lint-staged                      检查提交暂存区等代码
patch-package                    给node_modules打补丁
jest                             单元测试框架        // 无需分析
pushy                            reactNative 热更新管理工具
sript/*.sh                       自定义构建脚本,解耦package.json,可复用

对于打包下载依赖分析:

包名                        版本                                说明
react                      18.3.1                              React核心库
react-native               0.77.1                              ReactNative框架包
react-native-screens       ^4.10.0                             原生屏幕管理,提高导航性能
react-native-safe-area-context   ^5.3.0                        处理IOS安全适配
react-native-svg           ^15.12.0                            svg图形支持
react-native-gesture-handler                                   手势支持(用于导航/手势交互)
react-native-reanimated                                        高性能动画库,性能关键
react-native-linear-gradient                                   渐变背景支持
react-native-mmkv                                              超高性能的本地存储库(替代AsyncStorage)
包名                                            功能
@react-navigation/native                        主体导航容器
@react-navigation/native-stack                  使用原生堆栈导航(底层性能好)
@react-navigation/bottom-tabs                   底部tab栏支持
@react-navigation/routers                       路由处理逻辑
@react-native-screens                           配置native-stack实现屏幕切换优化
react-native-amap3d                              高德地图3D支持
react-native-amap-geolocation                    高德定位服务
react-native-permissions                         权限申请封装(如定位)
ky                                               小巧现代的fetch封装,适合用作请求库
mime                                             类型判断(用于文件上传)
react-native-upload                              文件上传封装
react-native-fs                                  文件读写能力
@react-native-dotenv                             支持.env文件读取配置(环境变量)
react-native-fast-image                          高性能图片加载(缓存,预加载)
react-native-image-picker                        图片/视频选择与拍照
@bam.tech/react-native-image-resizer             图片压缩与尺寸调整
react-native-camera-roll/camera-roll             相册读写(IOS/android)
tinify                                           接入TinyPNGAPI,压缩图片体积(常配置脚本使用)
react-native-update                              React Native热更新客户端SDK
pushy(CLI工具)                                    上传热更新Bundle/安装包/管理版本
@react-native/gradle-plugin                      ReactNative Gradle插件,Android构建辅助
@babel/core/preset-env/runtime                   Babel编译核心
babel-plugin-module-resolver                     自定义路径别名,如@/components
babel-plugin-transform-remove-console            打包移除console.log
@react-native/metro-config                       Metro bundler配置
@react-native/babel-preset                       React Native Babel默认预设
react-error-boundary                             错误边界处理,防止白屏崩溃
react-native-toast-message                       全局Toast消息
react-native-modal                               Modal弹窗库,动画和手势优化
zustand                                          小而强的状态管理库(React hooks风格)
@ant-desgin/react-native                          Ant Desgin RN 组件库
@ant-desgin/icons-react-native                    配套icon库
react-native-tab-view                             分页Tab支持
react-native-pager-view                           类似android ViewPager的组件(适合左右滑页)
react-native-draggable-flatlist                   可拖动排序的FlatList
react-native-render-html                          支持渲染HTML内容(富文本)
react-native-wheel-picker-andoid                  安卓滚轮选择器(年月日等)
jest                                              单元测试框架
@types/jest                                       jest类型提示支持
react-test-renderer                               React渲染输出快照测试
@types/react-test-renderer                        快照测试类型支持
@types/react                                      React类型声明文件
@types/*                                          给没有类型的第三方库补充类型定义
eslint                                            Javascript静态检查工具
eslint-config-prettier                            关闭eslint中可能与Prettier冲突的规则
eslint-plugin-prettier                            让eslint识别prettier格式问题
eslint-plugin-react                               提供React相关规则
eslint-plugin-react-hooks                         hooks使用规则(如依赖数组)
@typescript-eslint/parser                         让eslint解析TypeScript
@typescript-eslint/eslint-plugin                  TypeScript专用规则
prettier                                          代码格式化工具
typescript                                        TS编译工具
@react-native/eslint-config                       官方ESlint预设配置
@react-native/typescript-config                   官方TS配置预设
husky                                             设置git提交钩子
lint-staged                                       提交时只检查变动的文件
@commitlint/cli                                   校验commit message 格式
@commitlint/config-conventional                   提供常用规则(feat,fix) 
patch-package                                     对node_modules打补丁修复bug
glob                                              文本配置工具
dayjs                                             日期处理工具(轻量版moment.js)
lodash-es                                         函数式工具库,支持按需引入
immer                                             简化不可变数据处理
i18n-js                                           国际化支持
uuid                                              生成唯一标志符
@wutiange/log-listener-plugin                     日志监听插件(自定义)

实际代码块:

{
  "name": "main_platform_app",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "start:test": "APP_ENV=test react-native start",
    "test": "jest",
    "start:dev": "APP_ENV=dev react-native start",
    "start:hot": "APP_ENV=hot react-native start --experimental-debugger --reset-cache",
    "start:pre": "APP_ENV=pre react-native start --experimental-debugger --reset-cache",
    "start:prod": "APP_ENV=prod react-native start --experimental-debugger --reset-cache",
    "build-android": "./scripts/packages-android.sh",
    "build-android-dev": "./scripts/packages-android.sh dev",
    "build-android-hot": "./scripts/packages-android.sh hot",
    "build-android-pre": "./scripts/packages-android.sh pre",
    "build-android-stop": "./scripts/packages-android.sh stop",
    "build-android-prod": "./scripts/packages-android.sh prod noclear",
    "build-ios": "./scripts/packages-ios.sh",
    "build-ios-dev": "./scripts/packages-ios.sh dev",
    "build-ios-hot": "./scripts/packages-ios.sh hot",
    "build-ios-pre": "./scripts/packages-ios.sh pre",
    "build-ios-stop": "./scripts/packages-ios.sh stop",
    "build-ios-prod": "./scripts/packages-ios.sh prod noclear",
    "setLogUrl": "./scripts/logUrlPath.sh",
    "asset": "npx react-native-asset",
    "pushy:login": "pushy login",
    "pushy:select:android": "pushy selectApp --platform android",
    "pushy:select:ios": "pushy selectApp --platform ios",
    "pushy:source:android": "pushy uploadApk android/app/build/outputs/apk/release/app-release.apk",
    "pushy:source:ios": "pushy uploadIpa ios/build/rn-upload-app-temp/main_platform_app.ipa",
    "pushy:update:android:equality": "BUILD_MODULE=equality pushy bundle --platform android",
    "pushy:update:android:supply": "BUILD_MODULE=supply pushy bundle --platform android",
    "pushy:update:android:all": "BUILD_MODULE=all pushy bundle --platform android",
    "pushy:update:ios:equality": "BUILD_MODULE=equality pushy bundle --platform ios",
    "pushy:update:ios:supply": "BUILD_MODULE=supply pushy bundle --platform ios",
    "pushy:update:ios:all": "BUILD_MODULE=all pushy bundle --platform ios",
    "pushy:update:android": "pushy bundle --platform android",
    "pushy:update:ios": "pushy bundle --platform ios",
    "pushy:versions": "pushy versions",
    "prepare": "husky",
    "lint:lint-staged": "lint-staged",
    "postinstall": "patch-package",
    "compress": "node scripts/imageCompress.js"
  },
  "dependencies": {
    "@ant-design/icons-react-native": "^2.3.2",
    "@ant-design/react-native": "^5.3.2",
    "@bam.tech/react-native-image-resizer": "^3.0.11",
    "@react-native-camera-roll/camera-roll": "^7.10.1",
    "@react-native-picker/picker": "^2.11.1",
    "@react-native/gradle-plugin": "^0.79.3",
    "@react-navigation/bottom-tabs": "^7.3.3",
    "@react-navigation/native": "^7.0.19",
    "@react-navigation/native-stack": "^7.3.3",
    "@react-navigation/routers": "^7.4.0",
    "@wutiange/log-listener-plugin": "1.3.2",
    "ahooks": "^3.8.4",
    "aliyun-react-native-push": "0.10.0",
    "babel-plugin-module-resolver": "^5.0.2",
    "dayjs": "^1.11.13",
    "i18n-js": "^4.5.1",
    "immer": "^10.1.1",
    "ky": "^1.8.0",
    "lodash-es": "^4.17.21",
    "mime": "^4.0.7",
    "react": "18.3.1",
    "react-error-boundary": "^5.0.0",
    "react-native": "0.77.1",
    "react-native-amap-geolocation": "^1.2.3",
    "react-native-amap3d": "^3.2.4",
    "react-native-bootsplash": "^6.3.4",
    "react-native-device-info": "^14.0.4",
    "react-native-document-picker": "^9.3.1",
    "react-native-draggable-flatlist": "^4.0.3",
    "react-native-fast-image": "^8.6.3",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.24.0",
    "react-native-get-random-values": "^1.11.0",
    "react-native-image-picker": "^8.2.0",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-mmkv": "^3.2.0",
    "react-native-modal": "^14.0.0-rc.1",
    "react-native-pager-view": "^6.8.1",
    "react-native-permissions": "^5.3.0",
    "react-native-reanimated": "^3.17.1",
    "react-native-reanimated-dnd": "^1.1.0",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^5.3.0",
    "react-native-screens": "^4.10.0",
    "react-native-svg": "^15.12.0",
    "react-native-tab-view": "^4.1.1",
    "react-native-toast-message": "^2.2.1",
    "react-native-update": "^10.28.4",
    "react-native-webview": "^13.13.5",
    "react-native-wheel-picker-android": "^2.0.6",
    "uuid": "^11.1.0",
    "zustand": "^5.0.3"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@commitlint/cli": "^19.8.0",
    "@commitlint/config-conventional": "^19.8.0",
    "@react-native-community/cli": "15.0.1",
    "@react-native-community/cli-platform-android": "15.0.1",
    "@react-native-community/cli-platform-ios": "15.0.1",
    "@react-native-community/eslint-config": "^3.2.0",
    "@react-native/babel-preset": "0.77.1",
    "@react-native/eslint-config": "0.77.1",
    "@react-native/metro-config": "0.77.1",
    "@react-native/typescript-config": "0.77.1",
    "@types/jest": "^29.5.13",
    "@types/react": "^18.3.2",
    "@types/react-test-renderer": "^18.0.0",
    "@typescript-eslint/eslint-plugin": "^8.33.0",
    "@typescript-eslint/parser": "^8.33.0",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "eslint": "^8.19.0",
    "eslint-config-prettier": "^10.1.5",
    "eslint-plugin-prettier": "^5.4.0",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^5.2.0",
    "glob": "^11.0.2",
    "husky": "^9.1.7",
    "jest": "^29.6.3",
    "lint-staged": "^15.5.0",
    "patch-package": "^8.0.0",
    "prettier": "2.8.8",
    "react-native-asset": "^2.1.1",
    "react-native-dotenv": "^3.4.11",
    "react-native-svg-transformer": "^1.5.1",
    "react-native-upload": "^2.2.1",
    "react-test-renderer": "18.3.1",
    "tinify": "^1.8.0",
    "typescript": "5.0.4"
  },
  "lint-staged": {
    "*.{js,jsx,tsx,ts,json,md}": [
      "prettier --write"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint:lint-staged",
      "commit-msg": "commitlint"
    }
  },
  "engines": {
    "node": ">=18"
  }
}