在上节文章中我们讲了使用metro进行react-native工程的拆包，本节课程我们将基于webpack对reactnative进行拆包。
react-native本身不支持webpack的动态化，由此我们引入re.pack, 具体可参考re.pack, Re.Pack 不支持 Expo, 示例代码可参考：examples
注意事项
- 本章节部分区别于官网，如果仿照官网无法执行，可参考以下进行；
- 特别注意命令行的区别以及在运行和打包命令的区别
- 这里先贴出所使用的命令行，在打包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
- 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-init将webpack.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
网友评论