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方法

ReactNative系列之三十二Bundle的结构

bundle结构分析

猜你喜欢