bundle结构分析
包括三部分:
- polyfills : 最早执行的一些function,声明es语法新增的接口,定义模块声明方法
__d
等 - module difinitations : 模块声明,以
__d
开头,每一行代表一个JS的定义 - require calls : 执行
InitializeCore
和Entry File
,最后一行require(0);
1、polyfills部分
1)自执行匿名函数:
- 常见格式:(function() { /* code */ })();
- 解释:包围函数(function(){})的第一对括号向脚本返回未命名的函数,随后一对空括号立即执行返回的未命名函数,括号内为匿名函数的参数。
- 作用:可以用它创建命名空间,只要把自己所有的代码都写在这个特殊的函数包装内,那么外部就不能访问,除非你允许(变量前加上window,这样该函数或变量就成为全局)。各JavaScript库的代码也基本是这种组织形式。
总结一下,执行函数的作用主要为 匿名 和 自动执行,代码在被解释时就已经在运行了。
2)定义模块声明方法__d及require
!(function(r){
'usestrict';r.require=t,
r.__d=function(r,
t,
i){
if(tine)return;e[
t
]={
dependencyMap: i,
exports: void0,
factory: r,
hasError: !1,
isInitialized: !1
}
};vare=Object.create(null);functiont(t){
varn=t,
o=e[
n
];returno&&o.isInitialized?o.exports: (function(e,
t){
if(!i&&r.ErrorUtils){
i=!0;varn=void0;try{
n=a(e,
t)
}catch(e){
r.ErrorUtils.reportFatalError(e)
}returni=!1,
n
}returna(e,
t)
})(n,
o)
}t.async=function(r){
returnPromise.resolve().then(function(){
returnt(r)
})
};vari=!1;varn=16,
o=-1>>>n;functiona(i,
a){
varu=r.nativeRequire;!a&&u&&(u(i&o,
i>>>n),
a=e[
i
]);if(!a)throwError('Requiringunknownmodule"'+i+'".');if(a.hasError)throw(function(r,
e){
returnError('Requiringmodule"'+r+'",
whichthrewanexception: '+e)
})(i,
a.error);a.isInitialized=!0;varc=a.exports={
},
s=a,
d=s.factory,
f=s.dependencyMap;try{
varl={
exports: c
};returnd(r,
t,
l,
c,
f),
a.factory=void0,
a.dependencyMap=void0,
a.exports=l.exports
}catch(r){
throwa.hasError=!0,
a.error=r,
a.isInitialized=!1,
a.exports=void0,
r
}
}
})('undefined'!=typeofglobal?global: 'undefined'!=typeofself?self: this);'undefined'!=typeofglobal?global: 'undefined'!=typeofself&&self,
Object.assign=function(e,
n){
for(varf=1;f<arguments.length;f++){
varl=arguments[
f
];if(null!=l)for(varoinl)e[
o
]=l[
o
]
}returne
};
2、__d()模块定义部分
1)包括RN的源码js部分
2)自定义js部分
3)自定义图片资源信息
__d(function(e,n,t,o){'use strict';Object.defineProperty(o,"__esModule",{value:!0}),o.getName=function(){return'from common module! My name is '+this._name},o.setName=function(e){this._name=e},n('node_modules/react/index.js'),n('node_modules/react-native/Libraries/react-native/react-native-implementation.js')},"common/common.js");
__d(function(e,s,t,a){t.exports=s('node_modules/react-native/Libraries/Image/AssetRegistry.js').registerAsset({__packager_asset:!0,httpServerLocation:"/assets/subB",width:121,height:91,scales:[1],hash:"fbb224ba9a95abed93bd1c3281de9279",name:"linux",type:"jpeg"})},"subB/linux.jpeg");
__d实际上是metro-bundle/Resolver/polyfills/require.js文件中的define方法
3、require起始js文件
扫描二维码关注公众号,回复:
2880654 查看本文章
可以单独分析下InitializeCore.js,很多RN初始化的工作
;require("node_modules/react-native/Libraries/Core/InitializeCore.js");
;require("subA/subA.js");
require()实际上是metro-bundle/Resolver/polyfills/require.js文件中的require方法