如何在 React Native 中查看 javascript 包代码？答案

【问题标题】：How can I view the javascript bundle code in React Native?如何在 React Native 中查看 javascript 包代码？
【发布时间】：2023-03-04 02:57:01
【问题描述】：

我有一个使用 TypeScript 和 Babel 7 的 React Native 0.57.8 项目。

我想查看捆绑包中的 javascript 代码，以便查看 TypeScript 和 Babel 已修改的内容。具体来说，我想看看 TS 和 Babel 如何处理类构造函数的默认参数。

我知道如果构造函数参数被赋予修饰符，例如 public、private 或 readonly，TS 将添加 this.parameter = parameter 到类构造函数主体，但我不知道 this.parameter = parameter 是否添加到开头构造函数体的结尾，或构造函数体的结尾。

有没有办法查看 TS 和 Babel 创建的 javascript 输出？

【问题讨论】：

标签： javascript typescript react-native babeljs

【解决方案1】：

您可以自己生成捆绑包，然后对其进行检查。

在终端上运行时访问 Metro Bundler url，例如 http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false.

（如果尚未缓存，这可能需要一整代，因此可能需要一段时间）。

或者直接通过命令行生成静态文件：

// iOS
npx react-native bundle --entry-file=index.js --bundle-output='./bundle.js' --dev=false --platform='ios' --assets-dest='./ios' --reset-cache
// Android
npx react-native bundle --entry-file=index.js --bundle-output='./bundle.js' --dev=false --platform='android' --assets-dest='./android/app/src/main/res' --reset-cache

【讨论】：

非常感谢！我使用了 Metro Bundler 网址，并且能够轻松找到我正在寻找的代码。加载大约需要 5 分钟，但效果很好！
另外，我可以看到 TypeScript 将 this.parameter = 参数语句放在构造函数主体的开头。构造函数主体中的任何其他语句都在后面。
如果您执行--platform='ios' 或--platform='android'，这两个命令将失败。删除引号以使命令起作用：--platform=ios 或 platform=android。
你知道检查从apk中提取的index.android.bundle的方法吗？我正在使用react-native-obfuscation，需要检查我的设置是否正确..