reactjs – 如何在React Native for Production中添加sourcemap

在我的生成构建的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",file("$buildDir/../../../sourcemap.js")
}

输出路径看起来有点奇怪,但将其置于您的根级(与iOS相同的位置,我想要这样,你可以把它放在任何地方).

那么一旦你有一个错误的行号,这意味着你没有通过“源地图”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
    }));
});

在上面的示例输出中,行和列应该被替换为行和列号.

如果您将源地图存储在某处,则行代码和列号从构建变为构建时,代码更改将显示效果最好.它应该非常接近,但如果您可以使用您选择的源代码控制设置返回到用于构建相关应用程序的提交,并重新生成包含附加位的命令以生成源映射.