RN Metro打包流程
参考：react-native bundle 到 bundle 生成到底发生了什么(metro 打包流程简析)
流程
metro 打包的整个流程大致分为:
- 命令参数解析
- metro 打包服务启动
- 打包 js 和资源文件
- 解析，转化和生成
- 停止打包服务
涉及到的包
- @react-native-community（react-native bundle命令封装处）解析命令参数
- metro中进行解析、转换、生成
metro-source-map/src/source-map.js文件：
const SourceMap = require("source-map");
function toBabelSegments(sourceMap) {
const rawMappings = [];
new SourceMap.SourceMapConsumer(sourceMap).eachMapping(map => {
rawMappings.push({
generated: {
line: map.generatedLine,
column: map.generatedColumn
},
original: {
line: map.originalLine,
column: map.originalColumn
},
source: map.source,
name: map.name
});
});
return rawMappings;
}
node运行source-map.js脚本可以定位到错误代码（x行x列），大概像这样子：
react-native bundle 打包命令
执行react-native bundle 打包命令会生成一个android.main.bundle文件和android.main.bundle.map；
react-native bundle \
--dev false \
--platform android \
--entry-file index.android.js \
--bundle-output android.main.bundle \
--sourcemap-output android.main.bundle.map
打包后的文件：
命令参数：
--dev ： false： product包 true： dev包
--platform： 对应的平台
--entry-file：入口文件
--config： 额外配置
--bundle-output：生成的bundle文件输出位置
--assets-dest： 图片等资源输出的位置
--sourcemap-output： 映射文件输出的位置
sourcemap文件格式
{
version : 3,
file: "out.js",
sourceRoot : "",
sources: ["foo.js", "bar.js"],
names: ["src", "maps", "are", "fun"],
mappings: "AAgBC,SAAQ,CAAEA"
}
整个文件就是一个JavaScript对象，可以被解释器读取。它主要有以下几个属性：
version：Source map的版本，目前为3。
file：转换后的文件名。
sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
names：转换前的所有变量名和属性名。
mappings：记录位置信息的字符串，下文详细介绍。
具体sourcemap格式参考：JavaScript Source Map 详解
区别于Bundle文件格式（本质是一个string）：
// var声明层
var __BUNDLE_START_TIME__=this.nativePerformanceNow?nativePerformanceNow():Date.now(),__DEV__=false,process=this.process||{};process.env=process.env||{};process.env.NODE_ENV=process.env.NODE_ENV||"production";
//polyfill层
!(function(r){"use strict";r.__r=o,r.__d=function(r,i,n){if(null!=e[i])return;var o={dependencyMap:n,factory:r,hasError:!1,importedAll:t,importedDefault:t,isInitialized:!1,publicModule:{exports:{}}};e[i]=o}
...
// 模型定义层
__d(function(g,r,i,a,m,e,d){var n=r(d[0]),t=r(d[1]),o=n(r(d[2])),u=r(d[3]);t.AppRegistry.registerComponent(u.name,function(){return o.default})},0,[1,2,402,403]);
....
__d(function(a,e,t,i,R,S,c){R.exports={name:"ReactNativeSSR",displayName:"ReactNativeSSR"}},403,[]);
// require层
__r(93);
__r(0);
sentry代码监控
sentry是一个基于Django构建的现代化的实时事件日志监控、记录和聚合平台,主要用于如何快速的发现故障。
sentry上传sourcemap文件命令（sentry-cli）：React Native集成Sentry之SourceMap
sentry-cli releases -o pika -p react-native files com.reactnative_sentry_demo@test+3 upload-sourcemaps \
--dist 3 \
--url-prefix "app:///" \
--rewrite path/to/index.android.bundle path/to/index.android.bundle.map
sentry介绍：Sentry介绍与使用
基于sentry sourcemap的一个优化：
