React Native 拆包实践2 - react-nativ

2020-02-23  本文已影响0人  西西的一天

在上一节中,找到了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项目)

const config = await Metro.loadConfig();

await Metro.runBuild(config, {
  entry: 'index.js',
  out: 'bundle.js',
});
const config = await Metro.loadConfig();

await Metro.runServer(config, {
  port: 8080,
});
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的中间件。

上一篇下一篇

猜你喜欢

热点阅读