如何在React Native for Production中添加源地图?

如何在React Native for Production中添加源地图?,第1张

如何在React Native for Production中添加源地图?

对于源映射,这是我的处理方式:

在用于生产构建的bundle命令中,我告诉它生成源映射:

iOS:

react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap.js

Android-我必须实际修改android / app /
react.gradle文件,以获取在发布时生成的源地图。可能有一种更简单的方法,但是基本上您可以在bundleReleaseJsAndAssets方法中找到在哪个位置构建bundle命令并向其添加源映射位:

if (Os.isFamily(Os.FAMILY_WINDOWS)) {    commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",        entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")} else {    commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",        entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease, "--sourcemap-output", file("$buildDir/../../../sourcemap.js")}

输出路径看起来有些奇怪,但这使它位于您的根目录级别(与iOS相同。我想要这样。您显然可以将其放置在任何地方)。

然后,一旦您发现行号有错误,那就意味着什么都没有,您就可以通过“ source-map”
NPM程序包运行它。您可能会非常详细地介绍您的方法,但我只是简单地讲了:

var sourceMap = require('source-map');var fs = require('fs');fs.readFile('./sourcemap.js', 'utf8', function (err, data) {    var smc = new sourceMap.SourceMapConsumer(data);    console.log(smc.originalPositionFor({        line: 16,        column: 29356    }));});

上面示例输出中的行和列应替换为行和列编号的位置。

如果将源映射存储在某处,并且行和列号随着代码的更改而在构建之间进行更改,则这显然是最好的。但是,如果可以使用您选择的源代码控制设置返回到用于构建有问题的应用程序的提交,并使用命令的其他位重新生成捆绑包以生成源映射,则它应该非常接近。



欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/5642292.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-16
下一篇 2022-12-16

发表评论

登录后才能评论

评论列表(0条)

保存