React Native - 构建可靠的源地图
React Native - Building a reliable source map
我想我使用 Xcode 正确地创建了源映射。生产构建需要这个。
我补充了:
react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap/sourcemap.js
到 Bundle React Native code and images
在 build phases
中,在 Xcode 中生成一个似乎有效的 sourcemap。
但是,当我尝试使用以下代码来分析带有行号和列号的源地图时,我没有得到正确的结果
var sourceMap = require('source-map');
var fs = require('fs');
// read source-map, should be new for every build
fs.readFile('../my-app/src/sourcemap/sourcemap.js', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);
// replace line and colum numbers with line/col from error output
console.log(smc.originalPositionFor({
line: 105132,
column: 98
}));
});
我正在使用来自 Xcode 的堆栈跟踪作为测试,但我得到的是空值。 Xcode 部分输出:
2016-04-26 17:50:00.631 [error][tid:com.facebook.React.JavaScript] Can't find variable: dummyVar
2016-04-26 17:50:00.650 [fatal][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Can't find variable: dummyVar
2016-04-26 17:50:00.656 MyApp[311:84730] *** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Can't find variable: dummyVar', reason: 'Unhandled JS Exception: Can't find variable: dummyVar, stack:
render@105132:98
我尝试了多种行号和列号的组合。
我知道 JS 脚本肯定会查看源映射,因为如果我输入 line: 20 column: 10
我将从 Navigator/NavigatorSceneConfigs.js
中返回的 react-native 代码库中获取一行
这是否仅适用于 index.ios.bundle
中返回的行号?
任何能为我指明正确方向的想法都很棒
谢谢
您可以使用 react-native-source-maps
等库来帮助您处理发布版本的源映射。
https://github.com/philipshurpik/react-native-source-maps
要生成源映射,您可以使用这些设置:
对于 android,将其添加到您的 android/app/build.gradle
文件中。
project.ext.react = [
...
extraPackagerArgs: [
"--sourcemap-output", "$buildDir/intermediates/assets/release/index.android.bundle.map",
"--sourcemap-sources-root", "$rootDir/.."
]
]
从 react-native 0.55 开始,您现在可以在 iOS 上执行相同的操作。在您的 XCode 项目文件中,将 Bundle React Native code and images
构建阶段更新为:
export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map --sourcemap-sources-root $SRCROOT/..\"
../node_modules/react-native/scripts/react-native-xcode.sh
我想我使用 Xcode 正确地创建了源映射。生产构建需要这个。
我补充了:
react-native bundle --platform ios --entry-file index.ios.js --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios --sourcemap-output ./sourcemap/sourcemap.js
到 Bundle React Native code and images
在 build phases
中,在 Xcode 中生成一个似乎有效的 sourcemap。
但是,当我尝试使用以下代码来分析带有行号和列号的源地图时,我没有得到正确的结果
var sourceMap = require('source-map');
var fs = require('fs');
// read source-map, should be new for every build
fs.readFile('../my-app/src/sourcemap/sourcemap.js', 'utf8', function (err, data) {
var smc = new sourceMap.SourceMapConsumer(data);
// replace line and colum numbers with line/col from error output
console.log(smc.originalPositionFor({
line: 105132,
column: 98
}));
});
我正在使用来自 Xcode 的堆栈跟踪作为测试,但我得到的是空值。 Xcode 部分输出:
2016-04-26 17:50:00.631 [error][tid:com.facebook.React.JavaScript] Can't find variable: dummyVar
2016-04-26 17:50:00.650 [fatal][tid:com.facebook.React.RCTExceptionsManagerQueue] Unhandled JS Exception: Can't find variable: dummyVar
2016-04-26 17:50:00.656 MyApp[311:84730] *** Terminating app due to uncaught exception 'RCTFatalException: Unhandled JS Exception: Can't find variable: dummyVar', reason: 'Unhandled JS Exception: Can't find variable: dummyVar, stack:
render@105132:98
我尝试了多种行号和列号的组合。
我知道 JS 脚本肯定会查看源映射,因为如果我输入 line: 20 column: 10
我将从 Navigator/NavigatorSceneConfigs.js
这是否仅适用于 index.ios.bundle
中返回的行号?
任何能为我指明正确方向的想法都很棒
谢谢
您可以使用 react-native-source-maps
等库来帮助您处理发布版本的源映射。
https://github.com/philipshurpik/react-native-source-maps
要生成源映射,您可以使用这些设置:
对于 android,将其添加到您的 android/app/build.gradle
文件中。
project.ext.react = [
...
extraPackagerArgs: [
"--sourcemap-output", "$buildDir/intermediates/assets/release/index.android.bundle.map",
"--sourcemap-sources-root", "$rootDir/.."
]
]
从 react-native 0.55 开始,您现在可以在 iOS 上执行相同的操作。在您的 XCode 项目文件中,将 Bundle React Native code and images
构建阶段更新为:
export NODE_BINARY=node
export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/main.jsbundle.map --sourcemap-sources-root $SRCROOT/..\"
../node_modules/react-native/scripts/react-native-xcode.sh