打造你的React Native脚手架

随着对React Native的使用逐渐深入，团队积累了一些应用上的最佳实践，同时整理了一批基础组件。为了帮助其他团队快速使用React Native完成需求、替换已有业务，同时也为了帮助新人快速上手、规范项目开发，准备对React Native进行定制化改造，最终形成GFRN。
首先的第一步是了解React Native脚手架工具，根据需要定制个性化脚手架。

React Native Cli 分析

1. react-native-cli

React Native被发布为两个npm包，分别为react-native-cli和react-native。其中，react-native-cli需要被全局安装，作为脚手架在命令行工具中使用。
react-native-cli本身很轻量，他的工作只是初始化项目目录，本地安装react-native，并且将所有命令交给本地的react-native执行。
react-native-cli 代码地址，分析其主要代码

var cli;
//本地react-native目录下的cli.js，node_modules/react-native/cli.js
var cliPath = CLI_MODULE_PATH();
if (fs.existsSync(cliPath)) {
  cli = require(cliPath);
}

var commands = options._;
//本地react-native目录下cli.js存在时，即已经执行过init完成初始化，执行node_modules/react-native/cli.js的run方法
if (cli) {
  cli.run();
} else {
//本地react-native目录下cli.js不存在，进行参数校验。必须项为init命令和项目名
...
init(name,options)
}

//init方法检查同名项目是否存在并提示，然后进入createProject方法，在createProject方法中，创建项目目录，生成项目的package.json文件，进入run(root, projectName, options)方法
function run(root, projectName, options) {
//检查本地环境，判断使用yarn或者npm
//调用getInstallPackage获取准备安装的react-native版本，默认安装最新稳定版，脚手架支持-v参数指定版本
...
try {
    //安装react-native
    execSync(installCommand, {stdio: 'inherit'});
  } catch (err) {
    console.error(err);
    console.error('Command `' + installCommand + '` failed.');
    process.exit(1);
  }
}
...
cli = require(CLI_MODULE_PATH());
//执行node_modules/react-native/cli.js的init方法
cli.init(root, projectName);

上述示例中看到，在执行react-native init myApp初始化项目时，会在本地生成项目目录，安装本地react-native后，执行本地react-native目录下cli.js init方法继续完成初始化工作。执行react-native start等其他命令时，会将命令交由本地react-native目录下cli.js run方法完成命令执行工作。

2. react-native init myApp 执行过程

继续阅读node_modules/react-native/cli.js，发现其代码很简单

module.exports = require('./local-cli/cli.js');

/local-cli/cli.js作为local-cli入口文件代码也很简单，代码逻辑是在/local-cli/cliEntry.js，他输出了前文提到的init和run方法

module.exports = {
  run: run,
  init: init,
};

init指向/local-cli/init/init.js,在init.js init方法中，调用generateProject()方法来创建项目。generateProject方法中，关键步骤是调用/local-cli/generator/templates.js createProjectFromTemplate()方法来根据模板生成初始模板代码文件，其代码如下

function createProjectFromTemplate(destPath, newProjectName, template, yarnVersion) {
  // 以templates/HelloWorld项目为模板，将node_modules/react-native/local-cli/templates/HelloWorld文件拷贝到项目根目录
  copyProjectTemplateAndReplace(
    path.resolve('node_modules', 'react-native', 'local-cli', 'templates', 'HelloWorld'),
    destPath,
    newProjectName
  );

  if (template === undefined) {
    // 不指定模板参数template时，直接以HelloWorld项目作为模板项目
    return;
  }

//下段英文注释为源码中原有注释，解释了提供template参数时，根据template参数创建模板项目时的做饭，提到了对模板项目的结构要求
  // Keep the files from the 'HelloWorld' template, and overwrite some of them
  // with the specified project template.
  // The 'HelloWorld' template contains the native files (these are used by
  // all templates) and every other template only contains additional JS code.
  // Reason:
  // This way we don't have to duplicate the native files in every template.
  // If we duplicated them we'd make RN larger and risk that people would
  // forget to maintain all the copies so they would go out of sync.
  const builtInTemplateName = builtInTemplates[template];
  //node_modules/react-native/local-cli/templates/路径下内置模板
  if (builtInTemplateName) {
    createFromBuiltInTemplate(builtInTemplateName, destPath, newProjectName, yarnVersion);
  } else {
    // npm库中模板，template is e.g. 'ignite',
    // use the template react-native-template-ignite from npm
    createFromRemoteTemplate(template, destPath, newProjectName, yarnVersion);
  }
}

以上分析可知，react-native init myApp命令最终会根据node_modules/react-native/local-cli/templates/路径下内置模板来生成模板文件，如下即为模板项目的示例

3. react-native start 分析

前文提到，执行react-native start等其他命令时，会将命令交由本地react-native目录下cli.js run方法完成命令执行工作。
继续来看/local-cli/cliEntry.js

function run() {
  const setupEnvScript = /^win/.test(process.platform)
    ? 'setup_env.bat'
    : 'setup_env.sh';

  childProcess.execFileSync(path.join(__dirname, setupEnvScript));
  //遍历commands,在addCommand方法中，通过commander库注册该命令
  commands.forEach(cmd => addCommand(cmd, config));
//通过commander库解析当前输入
  commander.parse(process.argv);

  const isValidCommand = commands.find(cmd => cmd.name.split(' ')[0] === process.argv[2]);

  if (!isValidCommand) {
    printUnknownCommand(process.argv[2]);
    return;
  }

  if (!commander.args.length) {
    commander.help();
  }
}

上述代码中，会首先注册所有的命令，再根据当前输入匹配命中的命令去执行。
这里的commands来自/local-cli/commands.js，其中定义了当前项目中已有的命令

观察可知，在documentedCommands中列出的，即我们常用的命令，这里的每个命令，其结构的定义如下

export type CommandT = {
  name: string,
  description?: string,
  usage?: string,
  func: (argv: Array<string>, config: RNConfig, args: Object) => ?Promise<void>,
  options?: Array<{
    command: string,
    description?: string,
    parse?: (val: string) => any,
    default?: ((config: RNConfig) => mixed) | mixed,
  }>,
  examples?: Array<{
    desc: string,
    cmd: string,
  }>,
  pkg?: {
    version: string,
    name: string,
  },
};

其中react-native start命令，对应引入的./server/server。查看/local-cli/server/server.js可知，其输出为上述结构

module.exports = {
  name: 'start',
  func: server,
  description: 'starts the webserver',
  options: [{
    command: '--port [number]',
    default: 8081,
    parse: (val: string) => Number(val),
  }, ...//各种其他的option],
};

至此react-native start执行过程已经明确，其他命令的执行过程也是同样。

Create React Native App Cli 分析

了解了react-native-cli，再来看下当前社区热门的脚手架工具create-react-native-app。
create-react-native-app项目下包含两个子项目，create-react-native-app和react-native-scripts,其中，create-react-native-app为命令行工具。
create-react-native-app脚手架主要代码

async function createApp(name: string, verbose: boolean, version: ?string): Promise<void> {
  //参数校验
//packageToInstall = 'react-native-scripts'
  const packageToInstall = getInstallPackage(version);
//生成项目目录
  if (!await pathExists(name)) {
    await fse.mkdir(root);
  } else if (!await isSafeToCreateProjectIn(root)) {
    console.log(`The directory \`${name}\` contains file(s) that could conflict. Aborting.`);
    process.exit(1);
  }
//生成项目package.json文件
  const packageJson = {
    name: appName,
    version: '0.1.0',
    private: true,
  };
  await fse.writeFile(path.join(root, 'package.json'), JSON.stringify(packageJson, null, 2));

//调用run方法
  await run(root, appName, version, verbose, packageToInstall, packageName);
}

async function run(
  root: string,
  appName: string,
  version: ?string,
  verbose: boolean,
  packageToInstall: string,
  packageName: string
): Promise<void> {
//本地安装react-native-scripts
  install(packageToInstall, verbose, async (code: number, command: string, args: Array<string>) => {
    ...
  const scriptsPath = path.resolve(
      process.cwd(),
      'node_modules',
      packageName,
      'build',
      'scripts',
      'init.js'
    );

    const init = require(scriptsPath);
//执行node_modules/build/scripts/init.js init方法
    await init(root, appName, verbose, cwd);
  });
}

上述主要代码逻辑看出，create-react-native-app脚手架代码也很简单，在生成项目目录后，主要工作就是安装react-native-scripts并且调用react-native-scripts 的init.js完成初始化。而init.js中的主要代码逻辑，是将其template目录下模板文件拷贝到项目根目录，补充package.json文件并且安装依赖，其支持的命令，配置在package.json scripts中。

React Native 脚手架定制

在我们的实际需求中，需要通过脚手架工具，生成的模板项目中，包含我们封装的基础库和组件库，示例项目采用更有实际意义的demo，并且支持个性化的命令。

通过对react-native-cli, create-react-native-app源码的分析发现，实际上我们不需要重头开始开发我们的脚手架工具。

react-native-cli本身是具有可扩展性的，在使用react-native init命令初始化项目时，可以通过-template参数指定模板项目，对于定制化方案来讲，可以将抽离的组件、基础库和demo代码发布为一个npm包，以这样的形式来初始化项目，是可以满足生成定制化模板项目的需求的。

在分析react-native-cli时，其命令是通过commands.js定义的，其中 ，documentedCommands是其内置指令，如需自定义，一种方式可以再加一个组合customerCommands，然后引入自定义指令，这种方式侵入到node_modules下进行源码级别的修改，这是一个react-native-cli扩展性的不够的地方；另一种方式，是从getProjectCommands方法入手，这一方法会读取一些配置项作为初始时的命令，这为我们提供了一个hook的方式，可以通过定义rn-cli.config.js文件，并在其中覆盖内置的方法，返回我们的自定义命令。才有这一方式，需要对hook的方法充分理解，避免产生意外的冲突。

基于react-native-cli已经可以满足定制化模板项目的脚手架需求，而create-react-native-app之所以能够流行起来，是因为其简化了react-native的环境配置。如果你的业务仅包含js代码，无需额外原生依赖，可以使用配套的expo直接扫描本地server生成的二维码来运行代码，同时，expo-sdk也为开发者提供了一套方便的组件。这种扫码运行简单代码，快速查看效果的方式，也可以集成到模板项目中。