从零开始搭建一套 React 命令行脚手架

2024-02-11 20:58:10

快速搭建你的 React 命令行脚手架

React 作为当下风靡的前端框架，深受开发者喜爱。随着 React 生态的蓬勃发展，各种工具和库层出不穷，快速搭建 React 项目也成了重中之重。

命令行脚手架工具能高效生成项目结构、安装依赖、配置构建工具等，极大提高开发效率。本文将深入剖析 React 命令行脚手架的搭建流程，从零开始助你打造专属脚手架。

搭建指南

1. 项目初始化

新建一个项目文件夹存放脚手架代码：

mkdir my-react-cli
cd my-react-cli
npm init -y

2. 安装依赖

安装脚手架必需依赖：

npm install -D cross-spawn inquirer chalk execa fs-extra ejs

3. 创建脚手架命令

创建一个新命令负责生成项目结构、安装依赖等：

npx create-create-react-app

4. 测试脚手架命令

使用命令生成一个名为 my-app 的新 React 项目：

npx create-react-app my-app

5. 完善脚手架命令

根据需求完善脚手架功能：

支持自定义项目名称
选择不同 React 版本
安装额外依赖
配置构建工具

6. 发布脚手架命令

将完善的脚手架发布到 npm：

npm publish

代码示例

脚手架命令代码示例：

const createProject = async (projectName) => {
  await fs.ensureDir(projectName);
  await fs.copy('./template', projectName);
  const packageJson = await ejs.renderFile('./template/package.json', {
    projectName,
  });
  await fs.writeFile(`${projectName}/package.json`, packageJson);
  await execa('npm', ['install'], {
    cwd: projectName,
  });
  await execa('npm', ['start'], {
    cwd: projectName,
  });
};
const getProjectName = async () => {
  const answers = await inquirer.prompt([
    {
      type: 'input',
      name: 'projectName',
      message: '请输入项目名称：',
    },
  ]);
  return answers.projectName;
};
const main = async () => {
  const projectName = await getProjectName();
  await createProject(projectName);
};
main();