如何在React Native for Production中添加sourcemap?

对于源映射,我是这样做的:

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

网间网操作系统:

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相同的位置。我希望是这样的。你显然可以把它放在任何地方)。

然后,一旦您的行号出现错误,这意味着什么都没有,您就可以通过“源映射”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
    }));
});

其中,行和列应替换为上述示例输出中的行和列号。

如果您将源映射存储在某个地方,并且随着代码的变化,行和列的编号会从一个构建到另一个构建,那么这显然是最有效的。不过,如果您可以选择使用源代码管理设置,返回用于构建有问题的应用程序的提交,并使用生成源代码映射的命令的附加位重新生成捆绑包,那么它应该会非常接近。

安卓 灵感来自@chetstone的回答

从android的v0.32开始,您可以修改您的android/app/build。gradle来完成这一任务。 寻找线路

apply from: "../../node_modules/react-native/react.gradle"

就在上面,您将看到如下内容:

project.ext.react = [
    entryFile: "index.js",
]

修改它以匹配以下内容

project.ext.react = [
    entryFile: "index.js",
    extraPackagerArgs: ["--sourcemap-output", file("$buildDir/../../../sourcemap.android.js")]
]

在iOS上

进入Xcode中的构建阶段,进入“捆绑反应原生代码和图像”阶段,并添加:

export EXTRA_PACKAGER_ARGS="--sourcemap-output sourcemap.ios.js"

如前所述,没有明显的方法生成 sourcemap iOS上React Native的文件。这个 bundle 命令从调用 react-native-xcode.sh ,并且没有向 捆 命令行。但我找到了一个干净的方法。

反应-代表性代码.sh 使用环境变量 BUNDLE_CONFIG 以指定配置文件。如果您创建了一个空的配置文件,则该文件无效,然后您可以添加其他CLI参数。

创建一个空的配置文件。

touch null_config

设置 捆绑配置 使用配置文件 --sourcemap-output 参数

export BUNDLE_CONFIG="null_config --sourcemap-output ./sourcemap.js.map"

构建时,文件 sourcemap.js.map 将创建。

这仅适用于iOS。

步骤1:生成sourcemap。js文件。

在包中添加此行。json文件

 "bundle:ios": "mkdir -p ios/{Bundle,source-map}; react-native bundle --platform ios --entry-file index.js --dev false --bundle-output ios/Bundle/main.jsbundle --assets-dest ios/Bundle --sourcemap-output ios/source-map/sourcemap.js" 

运行此命令,它将创建sourcemap。js文件位于 $PROJECT_DIR/ios/source-map/ 文件夹

$ yarn bundle:ios

步骤2:创建文件源映射解码器。js下 $PROJECT_DIR/ios/源地图/

$ cd ios/source-map/

$ touch sourcemap-decoder.js

源映射解码器的内容。js是

const sourceMap = require('source-map'); //(install- npm i source-map)
const fs = require('fs');
const path = require('path');

fs.readFile(path.resolve(__dirname, 'sourcemap.js'), 'utf8', async (err, data) => {
  if (err) {
    console.log('err', err,);
  }
  const consumer = await new sourceMap.SourceMapConsumer(JSON.parse(data));

  console.log(consumer.originalPositionFor({
    line: 1408,
    column: 7762
  }));
});

步骤3:执行解码脚本

$ node ios/source-map/sourcemap-decoder.js