Gewusst wie: hinzufügen sourcemap in Reagieren Nativen für die Produktion?

Für die source-mapping-hier ist die Art, wie ich über gehen es:

In meinem bundle-Befehls für meine Produktion bauen ich sagen, dass es zu generieren, die eine Quelle Karte:

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 - ich musste tatsächlich ändern Sie das android/app/reagieren.gradle-Datei zu get source maps generieren auf release kompiliert. Möglicherweise gibt es einen einfacheren Weg, aber im Grunde, finden Sie, wo es baut sich der bundle-Befehl in der bundleReleaseJsAndAssets-Methode, und fügen Sie die Quell-map-bit zu:

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")
}

Den Ausgabe-Pfad ein wenig seltsam aussieht, aber das bringt es auf Ihrer obersten Ebene (gleiche Stelle wie iOS. Ich wollte es so. Sie können offensichtlich es überall).

Dann, wenn Sie einen Fehler mit der Zeile Zahl, die nichts bedeutet, Sie führen Sie es durch die "source-Karte" NPM-Paket. Man könnte wahrscheinlich sehr aufwändig mit Ihrem Ansatz, aber ich ging einfach mit:

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
    }));
});

Wobei Zeile und Spalte ersetzt werden soll mit Zeile und Spalte die Zahl aus deinem Beispiel-Ausgabe vor.

Diese offensichtlich funktioniert am besten, wenn Sie die source-Karten gespeichert, wie in der Zeile und Spalte die zahlen ändern sich von build zu bauen, wie Sie Ihre code-änderungen. Es sollte ziemlich nah, aber wenn Sie können, verwenden Sie die source-control-setup-Auswahl zurück zu gehen, zu Begehen, dass wurde verwendet, um die app in Frage-und re-generieren, die das bundle mit der zusätzlichen bits, um die der Befehl zum generieren der Quelle gekennzeichnet.

Wie bereits erwähnt, gibt es keine offensichtliche Möglichkeit, zu generieren, die sourcemap Datei Reagieren Native auf iOS. Die bundle Befehl aufgerufen wird, aus react-native-xcode.sh, und es gibt keine Bestimmung, hinzufügen von Parametern zu der bundle Befehlszeile. Aber ich fand eine saubere Art und Weise, es zu tun.

react-native-xcode.sh verwendet die Umgebungsvariable BUNDLE_CONFIG angeben einer config-Datei. Wenn Sie erstellen eine leere config Datei, es hat keine Wirkung, und dann Sie können hinzufügen zusätzlicher CLI-Parameter.

Erstellen Sie eine leere config Datei.

touch null_config

Set BUNDLE_CONFIG mit deiner config-Datei, und piggyback die --sourcemap-output parameter.

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

Beim erstellen der Datei sourcemap.js.map erstellt werden.