react-native 拆包方案:使用re.pack进行拆包, 更简单的拆包方式

在上节文章中我们讲了使用metro进行react-native工程的拆包,本节课程我们将基于webpack对reactnative进行拆包。

react-native本身不支持webpack的动态化,由此我们引入re.pack, 具体可参考re.pack, Re.Pack 不支持 Expo, 示例代码可参考:examples

注意事项

  1. 本章节部分区别于官网,如果仿照官网无法执行,可参考以下进行;
  2. 特别注意命令行的区别以及在运行和打包命令的区别
  3. 这里先贴出所使用的命令行,在打包bundle的时候你可能会发现我们并没有使用官网所介绍的方式,这里主要解决使用官网命令行可能导致出现的以下问题:
The "path" argument must be of type string. Received undefined.
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
  1. npm和yarn用一个就好,最好不要混用,本章使用npm
//package.json文件
 "scripts": {
    "android": "react-native run-android  --no-packager",
    "ios": "react-native run-ios --no-packager",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "start": "react-native webpack-start",
    "test": "jest",
    "bundle": "react-native webpack-bundle --dev false --platform ios --entry-file ./index.js --bundle-output ./main.jsbundle ",
    "pod_install": "cd ./ios && pod install"
  }

最低要求

Node.js >= 18.0.0
React Native >= 0.72.0

安装

要使用 Re.Pack 创建新的 React Native 项目或调整现有项目:

[可选] 使用 React Native Community CLI 初始化新项目

npx react-native@latest init AwesomeProject

转到你的 React Native 项目根目录

cd AwesomeProject

转换项目以使用 Re.Pack

npx @callstack/repack-init

更新pod依赖库

cd ./ios && pod install

默认情况下,@callstack/repack-initwebpack.config.mjs在项目的根目录中创建文件。如果您想使用.cjs格式,可以将--cjs标志传递给命令。您可以在官网阅读有关这些格式的更多信息。

示例写法

参考examples中本地local-chunks文件夹,修改index.js,拷贝src文件,在原有基础上更改app.json,

"localChunks": ["async_body"]

用法

对于reactnative开发的伙伴们,我们应该知道首先要启动服务, 参考上述命令

npm run start

打包

打包方式参考上述命令代码,该命令行是示例iOS端的

npm run bundle

运行之后我们就会发现多个bundle包,具体的bundle下发可参考上述的demo工程,不过我们不需要处理bundle的拼接,该三方库已支持,本章节我们简单介绍本人在初步使用该库遇到的问题以及探索的解决方案,后续我们将详细介绍push方案.......(可参考官网)

尾声

demo工程:等待中。。。。

运行环境:macOS 14.2.1
node版本:20.13.1
npm版本:10.5.2

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 224,896评论 6 522
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 96,283评论 3 402
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 172,085评论 0 367
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 61,010评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 70,015评论 6 400
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 53,492评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,858评论 3 428
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,829评论 0 279
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 47,374评论 1 324
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,409评论 3 346
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,527评论 1 355
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,131评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,858评论 3 339
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,296评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,434评论 1 276
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,087评论 3 381
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 46,597评论 2 366

推荐阅读更多精彩内容