create-react-app スキャフォールディングのコア ソース コードの /packages/react-scripts の解釈

React 公式スキャフォールディング

• バージョン 5.0.1 を例に挙げます
• プロジェクトの実行プロセスを作成する

ソースコード解釈デバッグ

プロジェクトを作成しcreate-react-app my-app、以前のソース コードを解釈します。詳細は、create-react-app の package/create-react-app コア ソース コード/packages/create-react-appから解釈できます(1)

packages/react-scripts次のコマンドを実行するのと同じです。

yarn init

以下のscripts/init.jsコードは、上から下までオンデマンドで解析を実行します。

1. 関数を入力します

 const appPackage = require(path.join(appPath, 'package.json'));

• debugコードは以下のように表示されます:

• 次に、実行してuseyarn戻ります。false以前に使用したnpmインストールの依存関係があるためです。
• templateName値はcra-template;です。
• templatePath現在の値は'my-app/node_modules/cra-template';です。
• templateJsonPath動作値'my-app/node_modules/cra-template/template.json'
• templateJson読み取り値を次のように取得します。

2.templatePackageToReplace

リターンを実行するfalse

3.新しいmy-appプロジェクトpackage.jsonを追加しますscripts。具体的なソース コードは次のとおりです。

appPackage.scripts = Object.assign(
    {
    
    
      start: 'react-scripts start',
      build: 'react-scripts build',
      test: 'react-scripts test',
      eject: 'react-scripts eject',
    },
    templateScripts
  );

ここでおなじみですか? create-react-appScaffoldingで初期化されたプロジェクトはpackage.jsonこんな感じ

4. eslint 構成を設定する

 appPackage.eslintConfig = {
    
    
   extends: 'react-app',
 };

5. ブラウザリストを設定する

6. 非同期書き込みpackage.json

fs.writeFileSync(
    path.join(appPath, 'package.json'),
    JSON.stringify(appPackage, null, 2) + os.EOL
  );

実行が完了したら、新しく作成したプロジェクトに移動して、my-app以下を表示します。

• 存在するかどうかを判断しREADME.md、戻りますfalse

8. テンプレート プロジェクトを新しいプロジェクト ディレクトリにコピーします。

ディレクトリには、初期化用のプロジェクト テンプレートが表示されます。create-react-app/packagescra-template

• templateDir動作値は'my-app/node_modules/cra-template/template'
• appPath動作値は'/Users/coco/project/shiqiang/create-react-app/packages/my-app'
• ソースコードの実行コピー

const templateDir = path.join(templatePath, 'template');
  if (fs.existsSync(templateDir)) {
    
    
    fs.copySync(templateDir, appPath);
  } else {
    
    
    console.error(
      `Could not locate supplied template: ${
      
      chalk.green(templateDir)}`
    );
    return;
  }

実行後、my-app表示に移動すると、この時点のディレクトリは次のようになります。

.gitignoreファイルが存在しません

9. 存在するかどうかを確認する.gitignore

ソースコードは次のとおりです。

const gitignoreExists = fs.existsSync(path.join(appPath, '.gitignore'));
  if (gitignoreExists) {
    
    
    // Append if there's already a `.gitignore` file there
    const data = fs.readFileSync(path.join(appPath, 'gitignore'));
    fs.appendFileSync(path.join(appPath, '.gitignore'), data);
    fs.unlinkSync(path.join(appPath, 'gitignore'));
  } else {
    
    
    // Rename gitignore after the fact to prevent npm from renaming it to .npmignore
    // See: https://github.com/npm/npm/issues/1862
    fs.moveSync(
      path.join(appPath, 'gitignore'),
      path.join(appPath, '.gitignore'),
      []
    );
  }

Returnfalseしてから を入力するとelse、操作が完了し、新しいプロジェクトがgitignore次のように置き換えられます。.gitignore

10. 初期化git repo

ソースコードは次のとおりです。

function tryGitInit() {
    
    
  try {
    
    
    execSync('git --version', {
    
     stdio: 'ignore' });
    if (isInGitRepository() || isInMercurialRepository()) {
    
    
      return false;
    }

    execSync('git init', {
    
     stdio: 'ignore' });
    return true;
  } catch (e) {
    
    
    console.warn('Git repo not initialized', e);
    return false;
  }
}

• yarnまたnpm

  if (useYarn) {
    
    
    command = 'yarnpkg';
    remove = 'remove';
    args = ['add'];
  } else {
    
    
    command = 'npm';
    remove = 'uninstall';
    args = [
      'install',
      '--no-audit', // https://github.com/facebook/create-react-app/issues/11174
      '--save',
      verbose && '--verbose',
    ].filter(e => e);
  }

• 追加のテンプレート依存関係をインストールします (存在する場合)

const dependenciesToInstall = Object.entries({
    
    
    ...templatePackage.dependencies,
    ...templatePackage.devDependencies,
  });
  if (dependenciesToInstall.length) {
    
    
    args = args.concat(
      dependenciesToInstall.map(([dependency, version]) => {
    
    
        return `${
      
      dependency}@${
      
      version}`;
      })
    );
  }

debugデータ：

args動作データ:

11. React をインストールするかどうかを決定する

• ソースコードは次のとおりです。

 if ((!isReactInstalled(appPackage) || templateName) && args.length > 1) {
    
    
    console.log();
    console.log(`Installing template dependencies using ${
      
      command}...`);

    const proc = spawn.sync(command, args, {
    
     stdio: 'inherit' });
    if (proc.status !== 0) {
    
    
      console.error(`\`${
      
      command} ${
      
      args.join(' ')}\` failed`);
      return;
    }
  }

• 関数isReactInstalled

function isReactInstalled(appPackage) {
    
    
  const dependencies = appPackage.dependencies || {
    
    };

  return (
    typeof dependencies.react !== 'undefined' &&
    typeof dependencies['react-dom'] !== 'undefined'
  );
}

• 主要な印刷情報:
  

12. 子プロセスがインストール コマンドを実行します。

• ソースコードは次のとおりです。

 const proc = spawn.sync(command, args, {
    
     stdio: 'inherit' });

• コンソールの動作情報は以下のとおりです。

13. deleteを実行し、node_modulesディレクトリを削除しますcra-template

[外部リンク画像の転送に失敗しました。ソース サイトにはリーチ防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-JsjGCYba-

14. CD への最もエレガントな方法を示します

• ソースコードは次のとおりです。

 let cdpath;
  if (originalDirectory && path.join(originalDirectory, appName) === appPath) {
    
    
    cdpath = appName;
  } else {
    
    
    cdpath = appPath;
  }

実行後のcdpath値はmy-app

15. 成功メッセージのプロンプト印刷

• ソースコードは次のとおりです。

 const displayedCommand = useYarn ? 'yarn' : 'npm';

  console.log();
  console.log(`Success! Created ${
      
      appName} at ${
      
      appPath}`);
  console.log('Inside that directory, you can run several commands:');
  console.log();
  console.log(chalk.cyan(`  ${
      
      displayedCommand} start`));
  console.log('    Starts the development server.');
  console.log();
  console.log(
    chalk.cyan(`  ${
      
      displayedCommand} ${
      
      useYarn ? '' : 'run '}build`)
  );
  console.log('    Bundles the app into static files for production.');
  console.log();
  console.log(chalk.cyan(`  ${
      
      displayedCommand} test`));
  console.log('    Starts the test runner.');
  console.log();
  console.log(
    chalk.cyan(`  ${
      
      displayedCommand} ${
      
      useYarn ? '' : 'run '}eject`)
  );
  console.log(
    '    Removes this tool and copies build dependencies, configuration files'
  );
  console.log(
    '    and scripts into the app directory. If you do this, you can’t go back!'
  );
  console.log();
  console.log('We suggest that you begin by typing:');
  console.log();
  console.log(chalk.cyan('  cd'), cdpath);
  console.log(`  ${
      
      chalk.cyan(`${ 
        displayedCommand} start`)}`);
  if (readmeExists) {
    
    
    console.log();
    console.log(
      chalk.yellow(
        'You had a `README.md` file, we renamed it to `README.old.md`'
      )
    );
  }
  console.log();
  console.log('Happy hacking!');

• コンソールの印刷情報は次のとおりです。

この時点で新規プロジェクトreact-scriptsは完了です