下面我們來(lái)看看react-native bundle的實(shí)現(xiàn)，bundle也是react-native的一個(gè)子命令，和start(ps: 實(shí)際在代碼里是server)同級(jí)：

// cli/packages/cli/src/commands/index.ts
export const projectCommands = [
  server,
  bundle,
  ...
] as Command[];

跳入bundle的實(shí)現(xiàn)，在下面的代碼中給出了注釋，主要的流程可以總結(jié)為：解析參數(shù) -> 啟動(dòng)metro server -> 打包js和資源文件，并保存于磁盤(pán)指定路徑 -> 停止metro server

// cli/packages/cli/src/commands/bundle/buildBundle.ts
async function buildBundle(
  args: CommandLineArgs,
  ctx: Config,
  output: typeof outputBundle = outputBundle,
) {
  const config = await loadMetroConfig(ctx, {
    maxWorkers: args.maxWorkers,
    resetCache: args.resetCache,
    config: args.config,
  });
  // 判斷打包的平臺(tái)是ios，android或是web，如果都不是，則拋出異常，結(jié)束打包
  if (config.resolver.platforms.indexOf(args.platform) === -1) {
    ...
    throw new Error('Bundling failed');
  }

  // This is used by a bazillion of npm modules we don't control so we don't
  // have other choice than defining it as an env variable here.
  process.env.NODE_ENV = args.dev ? 'development' : 'production';
  // 根據(jù)命令行的入?yún)?--sourcemap-output 構(gòu)建 sourceMapUrl
  // --sourcemap-output: File name where to store the sourcemap file for resulting bundle
  let sourceMapUrl = args.sourcemapOutput;
  if (sourceMapUrl && !args.sourcemapUseAbsolutePath) {
    sourceMapUrl = path.basename(sourceMapUrl);
  }
  // 根據(jù)解析得到參數(shù)，構(gòu)建RequestOptions，傳遞給打包函數(shù)
  const requestOpts: RequestOptions = {
    entryFile: args.entryFile,  // 入口文件，也就是react-native生成模板工程的index.js
    sourceMapUrl,
    dev: args.dev, // 生產(chǎn)環(huán)境還是開(kāi)發(fā)環(huán)境
    minify: args.minify !== undefined ? args.minify : !args.dev, // 是否壓縮生成的jsbundle
    platform: args.platform,
  };

  const server = new Server(config);

  try {
    // 開(kāi)始打包
    const bundle = await output.build(server, requestOpts);
    // 將打包生成的bundle存儲(chǔ)在--bundle-output指定的位置
    await output.save(bundle, args, logger.info);
    // 處理資源文件，解析，并在下一步保存在--assets-dest指定的位置
    const outputAssets: AssetData[] = await server.getAssets({
      ...Server.DEFAULT_BUNDLE_OPTIONS,
      ...requestOpts,
      bundleType: 'todo',
    });
    return await saveAssets(outputAssets, args.platform, args.assetsDest);
  } finally {
    server.end(); // 所有工作處理后，即可停止server
  }
}

sourceMapUrl?
從上述代碼可以看到具體的打包實(shí)現(xiàn)都在output.build(server, requestOpts)中，output是outputBundle類型，這部分代碼在Metro JS中，具體的路徑為：metro/packages/metro/src/shared/output/bundle.js

...
function buildBundle(
  packagerClient: Server,
  requestOptions: RequestOptions,
): Promise<{
  code: string,
  map: string,
  ...
}> {
  return packagerClient.build({
    ...Server.DEFAULT_BUNDLE_OPTIONS,
    ...requestOptions,
    bundleType: 'bundle',
  });
}
...
exports.build = buildBundle;

可以看到這里的packagerClient就是從外面?zhèn)魅氲膕erver，就是Metro Server，加了這一層封裝的目的是為了在requestOptions中添加一個(gè)bundleType參數(shù)，值為'bundle'。Server.build的源碼則在metro/packages/metro/src/Server.js中定義：

  async build(options: BundleOptions): Promise<{code: string, map: string, ...}> {
    const {
      entryFile,
      graphOptions,
      onProgress,
      serializerOptions,
      transformOptions,
    } = splitBundleOptions(options);
    // Resolution和Transformation
    const {prepend, graph} = await this._bundler.buildGraph(
      entryFile,
      transformOptions,
      {
        onProgress,
        shallow: graphOptions.shallow,
      },
    );
    // 開(kāi)始 Serialization
    const entryPoint = path.resolve(this._config.projectRoot, entryFile);
    const bundleOptions = {
      asyncRequireModulePath: this._config.transformer.asyncRequireModulePath,
      processModuleFilter: this._config.serializer.processModuleFilter,
      createModuleId: this._createModuleId,
      getRunModuleStatement: this._config.serializer.getRunModuleStatement,
      dev: transformOptions.dev,
      projectRoot: this._config.projectRoot,
      modulesOnly: serializerOptions.modulesOnly,
      runBeforeMainModule: this._config.serializer.getModulesRunBeforeMainModule(
        path.relative(this._config.projectRoot, entryPoint),
      ),
      runModule: serializerOptions.runModule,
      sourceMapUrl: serializerOptions.sourceMapUrl,
      sourceUrl: serializerOptions.sourceUrl,
      inlineSourceMap: serializerOptions.inlineSourceMap,
    };
    let bundleCode = null;
    let bundleMap = null;
    if (this._config.serializer.customSerializer) {
      const bundle = this._config.serializer.customSerializer(
        entryPoint,
        prepend,
        graph,
        bundleOptions,
      );
      if (typeof bundle === 'string') {
        bundleCode = bundle;
      } else {
        bundleCode = bundle.code;
        bundleMap = bundle.map;
      }
    } else {
      bundleCode = bundleToString(
        baseJSBundle(entryPoint, prepend, graph, bundleOptions),
      ).code;
    }
    if (!bundleMap) {
      bundleMap = sourceMapString(
        [...prepend, ...this._getSortedModules(graph)],
        {
          excludeSource: serializerOptions.excludeSource,
          processModuleFilter: this._config.serializer.processModuleFilter,
        },
      );
    }
    return {
      code: bundleCode,
      map: bundleMap,
    };
  }

在這個(gè)build函數(shù)中，首先執(zhí)行了buildGraph，而this._bundler的初始化發(fā)生在Server的constructor中。

  constructor(config: ConfigT, options?: ServerOptions) {
    ...
    this._createModuleId = config.serializer.createModuleIdFactory();
    this._bundler = new IncrementalBundler(config, {
      watch: options ? options.watch : undefined,
    });
    this._nextBundleBuildID = 1;
  }

此處的_bundler是IncrementalBundler的實(shí)例，它的buildGraph函數(shù)完成了打包過(guò)程中前兩步Resolution和Transformation?？梢蕴攵xmetro/packages/metro/src/IncrementalBundler.js查看它的完整實(shí)現(xiàn)。

constructor中除了配置了一些參數(shù)外，初始化了_bundler，還有我們之后再拆包中一個(gè)核心的函數(shù)createModuleIdFactory，它是從config.serializer中獲取的。

createModuleIdFactory負(fù)責(zé)固定 module 的 ID。在打包好的jsbundle中，__d中定義的各個(gè) module 后都有一個(gè)數(shù)字表示，并在jsbundle文件最后的 require 方法中進(jìn)行調(diào)用（如 require(41)），這其中的數(shù)字就是createModuleIdFactory方法生成的。

完成了Resolution和Transformation后，便是Serialization了。首先創(chuàng)建了一個(gè)bundleOptions，包含了所有Serialization中需要用到的參數(shù)，其中這兩個(gè)是我們的重點(diǎn)：

processModuleFilter: this._config.serializer.processModuleFilter,
createModuleId: this._createModuleId,

this._createModuleId在初始化時(shí)已經(jīng)創(chuàng)建好了，另一個(gè)processModuleFilter，它是用于過(guò)濾Transformation的結(jié)果，決定哪些module可以被序列化到最終輸出的jsbundle里。它是我們拆包的另一個(gè)核心函數(shù)。

接下來(lái)，通過(guò)判斷有沒(méi)有自定義的Serializer，決定由誰(shuí)來(lái)序列化。當(dāng)沒(méi)有自定一個(gè)serializer時(shí)，將才有自帶的bundleToString函數(shù)進(jìn)行序列化，序列化前，根據(jù)上一步結(jié)果通過(guò)baseJSBundle構(gòu)建一個(gè)Bundle對(duì)象。
bundleToString的入?yún)⑹荁undle，根據(jù)baseJSBundle的返回值我們可以知道Bundle的內(nèi)部結(jié)構(gòu)是這樣的：

{
  pre: string,
  post: string,
  modules: [[number, string]],
}

其中最主要的是這個(gè)modules，看似是一個(gè)二維數(shù)組，其實(shí)可以理解為T(mén)uple的數(shù)組，一個(gè)Tuple代表了一個(gè)js module，number是它的id，這個(gè)id是由createModuleId產(chǎn)生的，string就是這個(gè)module的js代碼的序列化結(jié)果。

有了這個(gè)認(rèn)識(shí)后，bundleToString的工作就是很明顯很多，sortedModules是將js module干id進(jìn)行了一個(gè)排序。再遍歷這個(gè)數(shù)組，將module code進(jìn)行了一個(gè)字符串拼接，拼接到code變量上。code上還同時(shí)拼接了pre和post。

function bundleToString(
  bundle: Bundle,
): {|+code: string, +metadata: BundleMetadata|} {
  let code = bundle.pre.length > 0 ? bundle.pre + '\n' : '';
  const modules = [];
  const sortedModules = bundle.modules
    .slice()
    .sort((a: [number, string], b: [number, string]) => a[0] - b[0]);

  for (const [id, moduleCode] of sortedModules) {
    if (moduleCode.length > 0) {
      code += moduleCode + '\n';
    }
    modules.push([id, moduleCode.length]);
  }

  if (bundle.post.length > 0) {
    code += bundle.post;
  } else {
    code = code.slice(0, -1);
  }

  return {
    code,
    metadata: {pre: bundle.pre.length, post: bundle.post.length, modules},
  };
}

接下來(lái)，我們可以看看baseJSBundle的實(shí)現(xiàn)。有了對(duì)bundleToString的理解，這部分代碼就很好懂了，其中調(diào)用了三次processModules函數(shù)，分別用于生產(chǎn)preCode，postCode，以及modules。

function baseJSBundle(
  entryPoint: string,
  preModules: $ReadOnlyArray<Module<>>,
  graph: Graph<>,
  options: SerializerOptions,
): Bundle {
  for (const module of graph.dependencies.values()) {
    options.createModuleId(module.path);
  }

  const processModulesOptions = {
    filter: options.processModuleFilter,
    createModuleId: options.createModuleId,
    dev: options.dev,
    projectRoot: options.projectRoot,
  };

  // Do not prepend polyfills or the require runtime when only modules are requested
  if (options.modulesOnly) {
    preModules = [];
  }

  const preCode = processModules(preModules, processModulesOptions)
    .map(([_, code]) => code)
    .join('\n');

  const modules = [...graph.dependencies.values()].sort(
    (a: Module<MixedOutput>, b: Module<MixedOutput>) =>
      options.createModuleId(a.path) - options.createModuleId(b.path),
  );

  const postCode = processModules(
    getAppendScripts(
      entryPoint,
      [...preModules, ...modules],
      graph.importBundleNames,
      {
        asyncRequireModulePath: options.asyncRequireModulePath,
        createModuleId: options.createModuleId,
        getRunModuleStatement: options.getRunModuleStatement,
        inlineSourceMap: options.inlineSourceMap,
        projectRoot: options.projectRoot,
        runBeforeMainModule: options.runBeforeMainModule,
        runModule: options.runModule,
        sourceMapUrl: options.sourceMapUrl,
        sourceUrl: options.sourceUrl,
      },
    ),
    processModulesOptions,
  )
    .map(([_, code]) => code)
    .join('\n');

  return {
    pre: preCode,
    post: postCode,
    modules: processModules(
      [...graph.dependencies.values()],
      processModulesOptions,
    ).map(([module, code]) => [options.createModuleId(module.path), code]),
  };
}

在processModules中，主要的作用就是一個(gè)filter，進(jìn)行了兩次filter，第一次過(guò)濾出所有的js module；第二次filter是有外面?zhèn)魅氲膄ilter決定的。

function processModules(
  modules: $ReadOnlyArray<Module<>>,
  {
    filter = () => true,
    createModuleId,
    dev,
    projectRoot,
  }: {|
    +filter?: (module: Module<>) => boolean,
    +createModuleId: string => number,
    +dev: boolean,
    +projectRoot: string,
  |},
): $ReadOnlyArray<[Module<>, string]> {
  return [...modules]
    .filter(isJsModule)
    .filter(filter)
    .map((module: Module<>) => [
      module,
      wrapModule(module, {
        createModuleId,
        dev,
        projectRoot,
      }),
    ]);
}

總結(jié)

到此我們已經(jīng)完整了梳理了一遍bundle的執(zhí)行過(guò)程，也從中了解到我們最關(guān)注的兩個(gè)函數(shù)createModuleIdFactory和processModuleFilter是何時(shí)被觸發(fā)的。下一節(jié)中，我們就一起來(lái)實(shí)現(xiàn)自己的createModuleIdFactory和processModuleFilter。