vlambda博客
学习文章列表

 npm install -g react-native-cli

react-native init MyRNProject

 react-native run-ios

 ~ % react-native --version> react-native-cli: 2.0.1> react-native: n/a - not inside a React Native project directory

~ % which react-native> /usr/local/bin/react-native

var fs = require('fs');var path = require('path');var exec = require('child_process').exec;var execSync = require('child_process').execSync;var chalk = require('chalk');var prompt = require('prompt');var semver = require('semver');

var options = require('minimist')(process.argv.slice(2));

 { "_": [ "init", "TestRNProject" ]}

var CLI_MODULE_PATH = function() {...  
var REACT_NATIVE_PACKAGE_JSON_PATH = function() {...

var cli;var cliPath = CLI_MODULE_PATH();if (fs.existsSync(cliPath)) { cli = require(cliPath);}

var commands = options._;if (cli) { cli.run();}

if (cli) { cli.run();} else { if (options._.length === 0 && (options.h || options.help)) { console.log([ 。。。//本文作者注:一些帮助信息的输出，这里省略 ].join('\n')); process.exit(0); }

 if (commands.length === 0) { console.error( 'You did not pass any commands, run `react-native --help` to see a list of all available commands.' ); process.exit(1); }

 switch (commands[0]) { case 'init': if (!commands[1]) { console.error( 'Usage: react-native init <ProjectName> [--verbose]' ); process.exit(1); } else { init(commands[1], options); //本文作者注:关键部分，完成初始化创建工作 } break; default: console.error( 'Command `%s` unrecognized. ' + 'Make sure that you have run `npm install` and that you are inside a react-native project.', commands[0] ); process.exit(1); break; }}

function init(name, options) { validateProjectName(name);

 if (fs.existsSync(name)) { createAfterConfirmation(name, options); } else { createProject(name, options); }}

function createProject(name, options) { var root = path.resolve(name); //本文作者注：这里是获取新RN项目的根目录的路径 var projectName = path.basename(root); //本文作者注：项目名称：TestRNProject

 console.log( 'This will walk you through creating a new React Native project in', root );

 //本文作者注：判断项目根目录是否存现，不存在就创建该目录 if (!fs.existsSync(root)) { fs.mkdirSync(root); }

 var packageJson = { name: projectName, version: '0.0.1', private: true, scripts: { start: 'node node_modules/react-native/local-cli/cli.js start' } }; //本文作者注：将配置信息写入新项目根目录下的package.json文件 fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson));   process.chdir(root); //本文作者注：设置当前工作目录到新RN工程，这里是~/Documents/workspace/Node/TestRNProject

 run(root, projectName, options); //本文作者注：root同上，projectName：TestRNProject， options同上}

function run(root, projectName, options) { // E.g. '0.38' or '/path/to/archive.tgz' const rnPackage = options.version; 。。。 //===============本文作者注：上面这一段主要是对yarn的版本校验和诱导安装，可以跳过  try { /* 本文作者注：调用创建进程方法，同步执行 npm install --save --save-exact react-nativ 命令 这一步就是安装react-nativ的node包 */ execSync(installCommand, {stdio: 'inherit'}); //installCommand：npm install --save --save-exact react-native } catch (err) { console.error(err); console.error('Command `' + installCommand + '` failed.'); process.exit(1); } checkNodeVersion(); cli = require(CLI_MODULE_PATH()); cli.init(root, projectName);}

cli = require(CLI_MODULE_PATH()); cli.init(root, projectName);

cli = require(CLI_MODULE_PATH());cli.init(root, projectName);

#!/usr/bin/env node//本文作者注：开头部分，为啥这样写，直接从react-nativ-cli工程的index.js拷贝过来的（其实是指定运行环境，这里是shell-node）'use strict';

var cli;cli = require('./cli'); //本文作者注：对应之前的 ‘cli = require(CLI_MODULE_PATH());’cli.init('/Users/dingxin/Documents/workspace/Node/TestRNProject', 'TestRNProject'); //本文作者注：对应之前的‘cli.init(root, projectName);’

Object.defineProperty(exports, "init", {
 enumerable: true,
 get: function () {
 return _initCompat.default;
 }
});
exports.bin = void 0;

async function initCompat(projectDir, argsOrName) {
 const args = Array.isArray(argsOrName) ? argsOrName // argsOrName was e.g. ['AwesomeApp', '--verbose']
 : [argsOrName].concat(_process().default.argv.slice(4)); // argsOrName was e.g. 'AwesomeApp'
 // args array is e.g. ['AwesomeApp', '--verbose', '--template', 'navigation']


 if (!args || args.length === 0) {
 _cliTools().logger.error('react-native init requires a project name.');


 return;
 }


 const newProjectName = args[0];
 const options = (0, _minimist().default)(args);


 _cliTools().logger.info(`Setting up new React Native app in ${projectDir}`);


 await generateProject(projectDir, newProjectName, options);
}

async function generateProject(destinationRoot, newProjectName, options) {
 const pkgJson = require('react-native/package.json');


 const reactVersion = pkgJson.peerDependencies.react;
 //笔者注：第一步，是根据RN包内置的模板工程，创建用户的新RN工程
 await (0, _templates.createProjectFromTemplate)(destinationRoot, newProjectName, options.template);


 _cliTools().logger.info('Adding required dependencies');


//笔者注：第二步，安装依赖的react库（node Module）
 await PackageManager.install([`react@${reactVersion}`], {
 root: destinationRoot
 });


 _cliTools().logger.info('Adding required dev dependencies');


//笔者注：这里是安装开发环境下依赖的辅助工具库，例如下面的babel、eslint等等
 await PackageManager.installDev(['@babel/core', '@babel/runtime', '@react-native-community/eslint-config', 'eslint', 'jest', 'babel-jest', 'metro-react-native-babel-preset', `react-test-renderer@${reactVersion}`], {
 root: destinationRoot
 });
 addJestToPackageJson(destinationRoot);


 if (_process().default.platform === 'darwin') {
 //笔者注：第三步，判断如果是mac环境，自动安装iOS工程的依赖库（通过cocopods安装）
 _cliTools().logger.info('Installing required CocoaPods dependencies');


 await (0, _installPods.default)({
 projectName: newProjectName
 });
 }


//至此，安装完成，打印帮助信息。
 (0, _printRunInstructions.default)(destinationRoot, newProjectName);
}

function copyProjectTemplateAndReplace(srcPath, destPath, newProjectName, options = {}) {


//笔者注：首先是一些参数校验，这里有删减，具体实现参考源码
 if (!srcPath) {
 throw new Error('Need a path to copy from');
 }


 
 这里是一个递归循环，源模板工程目录下依次递归执行处理（文件夹创建、文件复制修改等）
 (0, _walk.default)(srcPath).forEach(absoluteSrcFilePath => {
 // 'react-native upgrade'
 if (options.upgrade) {
 // Don't upgrade these files
 const fileName = _path().default.basename(absoluteSrcFilePath); // This also includes __tests__/index.*.js
 。。。
 //笔者注：这里省略了一些校验逻辑，具体实现参考源码
 }


 const relativeFilePath = translateFilePath(_path().default.relative(srcPath, absoluteSrcFilePath)).replace(/HelloWorld/g, newProjectName).replace(/helloworld/g, newProjectName.toLowerCase()); // Templates may contain files that we don't want to copy.
 。。。
 //笔者注：这里省略了一些校验逻辑，具体实现参考源码


 let contentChangedCallback = null;


 if (options.upgrade && !options.force) {
 contentChangedCallback = (_destPath, contentChanged) => upgradeFileContentChangedCallback(absoluteSrcFilePath, relativeFilePath, contentChanged);
 }


 //笔者注：下面是文件（夹）复制修改的最终实现方法
 (0, _copyAndReplace.default)(absoluteSrcFilePath, _path().default.resolve(destPath, relativeFilePath), {
 'Hello App Display Name': options.displayName || newProjectName,
 HelloWorld: newProjectName,
 helloworld: newProjectName.toLowerCase()
 }, contentChangedCallback);
 });
}

function copyAndReplace(srcPath, destPath, replacements, contentChangedCallback) {


 if (_fs().default.lstatSync(srcPath).isDirectory()) {
 if (!_fs().default.existsSync(destPath)) {
 _fs().default.mkdirSync(destPath);
 } // Not recursive
 return;
 }
 ...
 }

function copyAndReplace(srcPath, destPath, replacements, contentChangedCallback) { 。。。 const extension = _path().default.extname(srcPath);  if (binaryExtensions.indexOf(extension) !== -1) { // Binary file 二进制文件 let shouldOverwrite = 'overwrite'; if (contentChangedCallback) { const newContentBuffer = _fs().default.readFileSync(srcPath); 。。。 //笔者注：这里是对二进制文件是否需要重写的校验，具体实现参考源码 }

 if (shouldOverwrite === 'overwrite') { copyBinaryFile(srcPath, destPath, err => { if (err) { throw err; } }); } } else { 。。。

function copyAndReplace(srcPath, destPath, replacements, contentChangedCallback) {。。。 } else { // Text file 文本文件 const srcPermissions = _fs().default.statSync(srcPath).mode;

 //笔者注：读入文本文件，保存在变量content中 let content = _fs().default.readFileSync(srcPath, 'utf8');   /*笔者注：下面的forEach是对读入的文本文件进行查找替换文本，主要是把模板工程中的HelloWorld替换成我们的目标工程名字 调试可看到当前replacements参数： { 'Hello App Display Name': 'MyRNProject', HelloWorld: 'MyRNProject', helloworld: 'myrnproject' } */ Object.keys(replacements).forEach(regex => { content = content.replace(new RegExp(regex, 'g'), replacements[regex]); }); let shouldOverwrite = 'overwrite';  。。。

 //笔者注：写入文本文件 if (shouldOverwrite === 'overwrite') { _fs().default.writeFileSync(destPath, content, { encoding: 'utf8', mode: srcPermissions }); } //笔者注：文本文件处理结束 } //笔者注：copyAndReplace方法结束}

async function generateProject(destinationRoot, newProjectName, options) { 。。。

//笔者注：第二步，安装依赖的react库（node Module） await PackageManager.install([`react@${reactVersion}`], { root: destinationRoot });

 _cliTools().logger.info('Adding required dev dependencies');

//笔者注：这里是安装开发环境下依赖的辅助工具库，例如下面的babel、eslint等等 await PackageManager.installDev(['@babel/core', '@babel/runtime', '@react-native-community/eslint-config', 'eslint', 'jest', 'babel-jest', 'metro-react-native-babel-preset', `react-test-renderer@${reactVersion}`], { root: destinationRoot }); addJestToPackageJson(destinationRoot);

 。。。}

async function generateProject(destinationRoot, newProjectName, options) {。。。 if (_process().default.platform === 'darwin') { //笔者注：这里是判断如果是mac环境，自动安装iOS工程的依赖库（通过cocopods安装） _cliTools().logger.info('Installing required CocoaPods dependencies');

 await (0, _installPods.default)({ projectName: newProjectName }); }

//笔者注：至此，安装完成，打印帮助信息。 (0, _printRunInstructions.default)(destinationRoot, newProjectName);}