如何使用修改后的 create-react-app 版本创建自定义 React 项目？

Question

克隆了 create-react-app 存储库并对其进行了一些修改。现在，我想使用我的更新版本在本地创建 React 项目。本质上，我想使用像 npx create-custom-react-app 这样的命令来使用我的自定义版本生成新的 React 项目。

如何设置才能使用修改后的 create-react-app 版本在本地初始化 React 项目？

我尝试使用纱线链接将我的本地版本的create-react-app链接到我的全局npx设置，但我无法让它按预期工作。 我所期待的：

我希望在将我的自定义版本与yarn链接链接后，我能够运行npx create-custom-react-app并根据我的修改版本创建新的React项目。

Answer 1

有多种方法可以实现您想要的目标，并且都围绕自定义 Create React App (CRA)。您可以使用自定义模板或创建整个自定义 CRA 命令来实现此目的。

---

1. 使用自定义模板

此方法允许您定义具有特定依赖项、配置和文件的模板。然后，您可以将其与

create-react-app

命令一起使用，如下所示：

npx create-react-app my-app --template [template-name]

创建自定义模板的步骤：

• 遵循 CRA 模板结构，React 提供了一个文档来解释如何创建构建模板。

2. 创建自定义 CRA 命令

此方法涉及将 CRA 的完全自定义实现创建为 npm 包或 GitHub 存储库。这种方法更加通用，允许您控制项目设置的各个方面，例如脚手架逻辑、默认配置和自定义依赖项。

这样您就可以使用下一个命令仅使用 github 创建整个应用程序：

npx github:your-username/your-repo-name my-react-app

您需要为该存储库创建一个 JS 脚本，接下来只是您可以执行的操作的示例：

bin/create-my-react-app.js

#!/usr/bin/env node
const { execSync } = require('child_process');
const fs = require('fs');
const path = require('path');

const projectName = process.argv[2];
if (!projectName) {
    console.error('Error: Please specify a project name.');
    console.log('Usage: npx create-my-react-app <project-name>');
    process.exit(1);
}

const targetDir = path.resolve(process.cwd(), projectName);

console.log('Creating project...');
fs.mkdirSync(targetDir, { recursive: true });
fs.cpSync(path.join(__dirname, '../templates/default'), targetDir, { recursive: true });

console.log('Installing dependencies...');
execSync('npm install', { cwd: targetDir, stdio: 'inherit' });

console.log(`Project created successfully! Navigate to ${projectName} and start coding.`);

package.json

{
    "name": "create-my-react-app",
    "version": "1.0.0",
    "bin": {
        "create-my-react-app": "bin/create-my-react-app.js"
    }
}

完成此方法的一些文档：

自定义 CRA 命令资源

1. 使用 Node.js 构建自定义 CLI (FreeCodeCamp)：
   https://www.freecodecamp.org/news/how-to-build-a-cli-with-node-js/

2. Node.js CLI 文档:
   https://nodejs.org/api/cli.html

3. 教程：创建您自己的脚手架工具（开发者）：
   https://dev.to/davidepacilio/how-to-create-your-own-cli-with-node-js-4m2g

4. npm CLI 脚本指南:
   https://docs.npmjs.com/cli/v9/configuring-npm/package-json#bin

5. 将 GitHub Repos 与 npx 结合使用（npm 文档）：
   https://docs.npmjs.com/cli/v9/commands/npx