React Native 拆包实践2 - react-native start

在上一节中,找到了react-native启动bundle server的入口,即runServer函数,它的定义为:

async function runServer(_argv: Array<string>, ctx: Config, args: Args)

函数有三个入参,调用这个函数需要传入参数,那么是谁来调用这个函数呢?在server.ts中声明了这个command:

export default {
  name: 'start',
  func: runServer,
  description: 'starts the webserver',
  options: [
    {
      name: '--port [number]',
      parse: (val: string) => Number(val),
    },
    ...
  ],
};

可以看到在声明中有一组options,也就是我们在调用react-native start时可以带一些参数,例如带第一个option后react-native start --port 8888来指定端口号。那么是谁来将这个start command转化为runServer的函数调用并把options转化为函数的入参呢,它就是commander.js。到此,我们知道了bundle server启动的流程react-native start -> commander.js -> runServer -> metro.js。在解析runServer之前,需要先了解一下metro的核心概念,它有助于我们理解runServer函数的实现

Metro.js

metro是一个JavaScript的bundler,用于打包React-Native的js代码以及assets文件。metro接收一个index.js也就是RN的入口文件和其他打包选项,最终生成一个jsbundle文件,其中包括了所有js代码以及第三方依赖的js代码。当我们有一些资源文件时,也会将这些资源文件(例如图片)按照一个rn可读取的目录结构复制到指定的目录。

例如在打包bundle时执行react-native bundle --platform ios --dev false --entry-file index.js --bundle-output build/index.ios.jsbundle命令,其中传入了一个--entry-file index.js就是用于指定这个入口文件。

在这个打包过程中,一共包含了三个阶段:

  1. Resolution
    解析,通过入口文件解析整个依赖关系,比如index.js中会import其他js文件,依次类推,解析所有依赖的js文件
  2. Transformation
    转换,所有的js文件需要被转换为指定平台(react-native)所能解析的语法格式,类似与 Babel所做的工作。在执行过程中,该步骤可以与步骤1,Resolution并行执行
  3. Serialization
    序列号,在这一步中,会将各个模块转换后的js文件合并生成一个或多个jsbundle文件。通常如果我们没有做任何配置,rn只会生成一个jsbundle文件。

根据Metro官方文档中的Quick Start,我们可以更好的理解这一过程(ps:这个Quick Start只是一个示例,仅能用于非常简单的玩具rn项目)

  • 编译
    Metro可通过npm install进行安装,此处指定了入口和出口文件
const config = await Metro.loadConfig();

await Metro.runBuild(config, {
  entry: 'index.js',
  out: 'bundle.js',
});
  • 运行bundle server
    获取到metro config后,可以根据这个配置运行一个bundle server
const config = await Metro.loadConfig();

await Metro.runServer(config, {
  port: 8080,
});
  • 在bundle server中加入一些中间件
    启动http server是可以加入一些中间件,也可以使用expressjs
const Metro = require('metro');
const express = require('express');
const app = express();
const server = require('http').Server(app);

Metro.loadConfig().then(async config => {
  const connectMiddleware = await Metro.createConnectMiddleware(config);
  const {server: {port}} = config;

  app.use(connectMiddleware.middleware);
  server.listen(port);
  connectMiddleware.attachHmrServer(server);
});

在了解了metro的一些核心概念后,metro server启动的流程大致可以总结为:读取配置 -> 配置中间件 -> 启动bundle server。有了这个认识后,我们可以看看runServer的实现了。

runServer 分析

先上源码吧

async function runServer(_argv: Array<string>, ctx: Config, args: Args) {
  // 初始化相关的配置,配置std out
  let eventsSocket:
    | ReturnType<typeof eventsSocketModule.attachToServer>
    | undefined;
  const terminal = new Terminal(process.stdout);
  const ReporterImpl = getReporterImpl(args.customLogReporterPath);
  const terminalReporter = new ReporterImpl(terminal);
  const reporter = {
    update(event: any) {
      terminalReporter.update(event);
      if (eventsSocket) {
        eventsSocket.reportEvent(event);
      }
    },
  };

  // 获取 metro config
  const metroConfig = await loadMetroConfig(ctx, {
    config: args.config,
    maxWorkers: args.maxWorkers,
    port: args.port,
    resetCache: args.resetCache,
    watchFolders: args.watchFolders,
    projectRoot: args.projectRoot,
    sourceExts: args.sourceExts,
    reporter,
  });

  // 配置asset插件
  if (args.assetPlugins) {
    metroConfig.transformer.assetPlugins = args.assetPlugins.map(plugin =>
      require.resolve(plugin),
    );
  }

  // 中间件配置
  const middlewareManager = new MiddlewareManager({
    host: args.host,
    port: metroConfig.server.port,
    watchFolders: metroConfig.watchFolders,
  });

  middlewareManager.getConnectInstance().use(
    // @ts-ignore morgan and connect types mismatch
    morgan(
      'combined',
      !logger.isVerbose()
        ? {
            skip: (_req, res) => res.statusCode < 400,
          }
        : undefined,
    ),
  );

  metroConfig.watchFolders.forEach(
    middlewareManager.serveStatic.bind(middlewareManager),
  );

  const customEnhanceMiddleware = metroConfig.server.enhanceMiddleware;

  metroConfig.server.enhanceMiddleware = (middleware: any, server: unknown) => {
    if (customEnhanceMiddleware) {
      middleware = customEnhanceMiddleware(middleware, server);
    }

    return middlewareManager.getConnectInstance().use(middleware);
  };

  // 运行metro server
  const serverInstance = await Metro.runServer(metroConfig, {
    host: args.host,
    secure: args.https,
    secureCert: args.cert,
    secureKey: args.key,
    hmrEnabled: true,
  });

  // 配置开发相关的socket中间件
  const wsProxy = webSocketProxy.attachToServer(
    serverInstance,
    '/debugger-proxy',
  );
  const ms = messageSocket.attachToServer(serverInstance, '/message');
  eventsSocket = eventsSocketModule.attachToServer(
    serverInstance,
    '/events',
    ms,
  );

  middlewareManager.attachDevToolsSocket(wsProxy);
  middlewareManager.attachDevToolsSocket(ms);

  if (args.interactive) {
    enableWatchMode(ms);
  }

  middlewareManager
    .getConnectInstance()
    .use('/reload', (_req: http.IncomingMessage, res: http.ServerResponse) => {
      ms.broadcast('reload');
      res.end('OK');
    });

  serverInstance.keepAliveTimeout = 30000;

  await releaseChecker(ctx.root);
}

源码中,可以看到loadMetroConfig用于获取metro config,和官方文档相比,这里添加了一下额外的参数。参数的含义通过名字可以了解一二,具体可以参考官方文档。在获取metro config之前,还做了一下初始化操作,例如启动一个terminal session,用于输出日志。

接下来,是获取assert插件,来处理资源文件

  if (args.assetPlugins) {
    metroConfig.transformer.assetPlugins = args.assetPlugins.map(plugin =>
      require.resolve(plugin),
    );
  }

之后开始配置一些server中间件,file watcher,用于监控js文件的改变。处理完成后,便是server的启动了,这里和示例的类似,通过metro config和一些额外的参数启动server

  const serverInstance = await Metro.runServer(metroConfig, {
    host: args.host,
    secure: args.https,
    secureCert: args.cert,
    secureKey: args.key,
    hmrEnabled: true,
  });

在server运行后,有配置了一些和开发相关websocket的中间件。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容