Create-react-app scaffolding/packages/create-react-app core source code interpretation (2)

Function checkThatNpmCanReadCwd

The meaning of the function name : check whether Npm can read Cwd

First look at the source code

const spawn = require('cross-spawn');


// See https://github.com/facebook/create-react-app/pull/3355
function checkThatNpmCanReadCwd() {
    
    
  const cwd = process.cwd();
  let childOutput = null;
  try {
    
    
    // Note: intentionally using spawn over exec since
    // the problem doesn't reproduce otherwise.
    // `npm config list` is the only reliable way I could find
    // to reproduce the wrong path. Just printing process.cwd()
    // in a Node process was not enough.
    childOutput = spawn.sync('npm', ['config', 'list']).output.join('');
  } catch (err) {
    
    
    // Something went wrong spawning node.
    // Not great, but it means we can't do this check.
    // We might fail later on, but let's continue.
    return true;
  }
  if (typeof childOutput !== 'string') {
    
    
    return true;
  }
  const lines = childOutput.split('\n');
  // `npm config list` output includes the following line:
  // "; cwd = C:\path\to\current\dir" (unquoted)
  // I couldn't find an easier way to get it.
  const prefix = '; cwd = ';
  const line = lines.find(line => line.startsWith(prefix));
  if (typeof line !== 'string') {
    
    
    // Fail gracefully. They could remove it.
    return true;
  }
  const npmCWD = line.substring(prefix.length);
  if (npmCWD === cwd) {
    
    
    return true;
  }
  console.error(
    chalk.red(
      `Could not start an npm process in the right directory.\n\n` +
        `The current directory is: ${
      
      chalk.bold(cwd)}\n` +
        `However, a newly started npm process runs in: ${
      
      chalk.bold(
          npmCWD
        )}\n\n` +
        `This is probably caused by a misconfigured system terminal shell.`
    )
  );
  if (process.platform === 'win32') {
    
    
    console.error(
      chalk.red(`On Windows, this can usually be fixed by running:\n\n`) +
        `  ${
      
      chalk.cyan(
          'reg'
        )} delete "HKCU\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n` +
        `  ${
      
      chalk.cyan(
          'reg'
        )} delete "HKLM\\Software\\Microsoft\\Command Processor" /v AutoRun /f\n\n` +
        chalk.red(`Try to run the above two lines in the terminal.\n`) +
        chalk.red(
          `To learn more about this problem, read: https://blogs.msdn.microsoft.com/oldnewthing/20071121-00/?p=24433/`
        )
    );
  }
  return false;
}

Interpretation of the meaning of the core code in the function

childOutput = spawn.sync('npm', ['config', 'list']).output.join('');What is the meaning of the core line of code?

1. Meaning of code key annotations

// 注意：故意在 exec 上使用 spawn
// 否则问题不会重现。
// `npm config list` 是我能找到的唯一可靠的方法
// 重现错误的路径。只需打印 process.cwd()
// 在 Node 进程中是不够的

1. After debugging to specific execution

as abovechildOutput：'; cli configs

2. Supplementary key knowledge points

spawnDependent third-party librariesconst spawn = require('cross-spawn');

spawn.syncIndicates that the child process executes the command asynchronously

npm config list

It can be printed directly on your computer console. In fact, it is some configuration related to npm. Running directly on the console has the same effect:

3. Continue to execute

// `npm config list` 输出包括以下行：
// "; cwd = C:\path\to\current\dir" (未加引号)
// 我找不到更简单的方法来获取它。

linesDebug is as follows:

const prefix = '; cwd = ';
  const line = lines.find(line => line.startsWith(prefix));
  if (typeof line !== 'string') {
    
    
    // Fail gracefully. They could remove it.
    return true;
  }

'; cwd = /create-react-app/packages/my-app'
If the judgment is not established, continue to execute downward;

4. npmCWD

if (npmCWD === cwd) {
    
    
  return true;
}

set up returns true;

function execution completed