React 脚手架构建的最终奥秘

前端

2023-11-21 07:47:14

React 脚手架：助力提升 React 开发效率

构建目录结构
编写 bin/index.js
创建项目
本地调试
扩展脚手架
常见问题解答

简介

React 脚手架是一种工具，可以帮助你快速搭建新的 React 项目，并自动生成必要的配置文件和文件夹。本文将指导你如何使用 Node.js 构建自己的 React 脚手架，并分享如何使用它的详细步骤。

构建目录结构

创建一个名为 test-cli 的文件夹作为根目录，并在其中创建以下文件夹：

bin
src
package.json

编写 bin/index.js

在 bin 文件夹中创建 index.js 文件，并添加以下代码：

const program = require('commander');
const fs = require('fs');
const path = require('path');

program
  .version('0.0.1')
  .option('-p, --project-name <project-name>', 'Name of the project to be created')
  .parse(process.argv);

if (!program.projectName) {
  console.error('Project name is required');
  process.exit(1);
}

const projectName = program.projectName;
const projectPath = path.join(process.cwd(), projectName);

fs.mkdirSync(projectPath);

const packageJson = {
  name: projectName,
  version: '0.0.1',
  dependencies: {
    react: '^17.0.2',
    react-dom: '^17.0.2',
  },
};

fs.writeFileSync(path.join(projectPath, 'package.json'), JSON.stringify(packageJson, null, 2));

console.log(`Project ${projectName} created successfully!`);