🚀🚀🚀 基于 Create React App，我开源了一个全新的前端脚手架，支持用户灵活扩展一、背景 📖 在

一、背景 📖

在刚开始学习 React 的时候，我使用的脚手架是 create-react-app。它的零配置、开箱即用对新手非常友好。然而，想要扩展或自定义配置，就必须使用 eject，或者依赖工具如 craco，过程既繁琐又复杂。如今，create-react-app 也已不再维护，社区普遍推荐转向 Next.js。

然而，尽管 Next.js 功能强大，很多信息又零散，初学者在想用它从零搭建一个组件库或工具库时，依然会被大量陌生的配置和概念劝退。曾经我也试过从零搭建一个 React 组件库，但面对一堆陌生的配置，常常无从下手。

Create-Crack 正是为了解决这些问题而生的。它提供了零配置、开箱即用的体验，完美适配 TypeScript 和 React 项目，让你轻松上手，免除繁琐配置，专注写业务，助力你快速打造高质量的项目。🚀🚀🚀

二、特性 🧰

🎯 多模板支持（React + JS/TS）
📦 多包管理器支持
🔍 ESLint 集成
📝 Commit Lint 支持
🍻 支持用户自定义 Webpack 配置扩展原有的配置，为项目添加特有的功能;
🎯 支用户自定义 Babel 配置，让你的程序更健壮;
📕 友好的日志输出，让你快速定位问题所在以及增加开发体验;

三、快速开始 🚩

交互式模式

最简单的使用方式，工具会引导你完成所有配置：

npx create-crack my-app

然后按照提示选择：

🎯 项目类型（React + JS 或 React + TS）
📦 包管理器（npm/yarn/pnpm/cnpm）
🔍 是否启用 ESLint
📝 是否启用 Commit Lint

如下图所示：

20250527100143

如果运行成功，会有如下结果所示：

20250527100223

命令行模式

如果你知道具体配置，可以直接通过参数指定：

# 创建 TypeScript 项目，使用 pnpm，启用所有功能
npx create-crack my-app -t react-web-ts -p pnpm -e -c

# 创建 JavaScript 项目，使用 npm，只启用 ESLint
npx create-crack my-app --template react-web-js --package-manager npm --eslint

📋 命令行选项

选项	简写	描述	可选值
`--template`	`-t`	项目模板	`react-web-js`, `react-web-ts`
`--package-manager`	`-p`	包管理器	`npm`, `yarn`, `pnpm`, `cnpm`
`--eslint`	`-e`	启用 ESLint	-
`--commit-lint`	`-c`	启用 Commit Lint	-
`--no-eslint`	-	禁用 ESLint	-
`--no-commit-lint`	-	禁用 Commit Lint	-
`--force`	`-f`	强制覆盖已存在的目录	-
`--help`	`-h`	显示帮助信息	-
`--version`	`-V`	显示版本号	-

🎯 项目模板

React + JavaScript (`react-web-js`)

⚛️ React 19.x
📦 现代化的构建配置
🎨 Prettier 代码格式化
🔧 开发服务器和构建脚本

React + TypeScript (`react-web-ts`)

⚛️ React 19.x + TypeScript
🔷 完整的类型定义
📦 现代化的构建配置
🎨 Prettier 代码格式化
🔧 开发服务器和构建脚本

项目配置

如果你需要对 webpack 这些进行一些特定的配置，你可以像 webpack 一样直接配置，让你可以根据项目需求灵活调整构建行为。

🌍 环境变量支持

工具包会自动读取以下环境变量文件（按优先级排序）：

.env.${NODE_ENV} (如 .env.development, .env.production)
.env

环境变量规则

REACTAPP 前缀的变量会自动注入到客户端代码中
支持变量展开（如 API_URL=$BASE_URL/api）
用户配置函数可以访问所有环境变量

示例 .env 文件

# .env.development
NODE_ENV=development
REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_DEBUG=true
API_PROXY_TARGET=http://localhost:8080
DEV_PORT=3000
AUTO_OPEN=true

# .env.production
NODE_ENV=production
REACT_APP_API_URL=https://api.example.com
REACT_APP_DEBUG=false
USE_CDN=true
ANALYZE=false

支持的配置文件

在项目根目录创建以下任一配置文件（按优先级排序）：

webpack.config.ts （推荐，支持 TypeScript）
webpack.config.js
webpack.config.mjs
webpack.config.mts

配置方式

注意：用户项目中无需安装 webpack 相关依赖，所有依赖已内置在 @verve-kit/react-script 中。配置文件中不要导入 webpack 相关模块。

1. 对象式配置

// webpack.config.ts
import path from "path";

export default {
  // 路径别名配置
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@components": path.resolve(__dirname, "src/components"),
    },
  },

  // 自定义入口文件（可选）
  entry: "./src/main.tsx",

  // 输出配置（可选）
  output: {
    filename: "bundle.[contenthash].js",
  },
};

2. 函数式配置（推荐）

函数式配置更加灵活，可以根据环境动态生成配置：

// webpack.config.ts
import path from "path";
import type { ConfigContext } from "@verve-kit/react-script";

export default ({ isDevelopment, env }: ConfigContext) => ({
  // 路径别名
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "@components": path.resolve(__dirname, "src/components"),
    },
  },

  // 开发服务器代理
  ...(isDevelopment && {
    devServer: {
      proxy: {
        "/api": {
          target: env.API_PROXY_TARGET ?? "http://localhost:8080",
          changeOrigin: true,
        },
      },
    },
  }),
});

3. 异步配置

支持异步函数配置，可以动态加载配置：

// webpack.config.ts
import type { ConfigContext } from "@verve-kit/react-script";

export default async ({ isDevelopment }: ConfigContext) => {
  // 异步加载配置
  const dynamicConfig = await import("./config/webpack.dynamic.js");

  return {
    ...dynamicConfig.default,
    // 根据环境动态配置
    devtool: isDevelopment ? "eval-source-map" : "source-map",
  };
};

配置上下文 (ConfigContext)

函数式配置会接收一个上下文对象，包含以下属性：

interface ConfigContext {
  /** 当前模式：'development' | 'production' */
  mode: string | undefined;

  /** 是否为开发环境 */
  isDevelopment: boolean;

  /** 环境变量对象（包含用户的 .env 文件和系统环境变量） */
  env: Record<string, string | undefined>;
}

总结

最后贴上项目地址：[github.com/xun082/crea…]

本项目为 create-neat 项目的分解版，两个项目采用的不同的架构实现相同的功能，解决相同的目标。

另外本项目会作为前端工程化实战课程里面的一部分内容，整个项目会从零到一讲解如何实现一个这种的项目并且会在后面实现更优雅的架构，例如通过插件模式来实现扩展等等。

你是否遇到这些问题？

项目越做越大，维护成本越来越高？
团队协作混乱，代码风格各不相同？
不懂工程化工具，效率低下、流程不清？

我正在筹备一套前端工程化体系的实战课程。如果你在学习前端的过程中感到方向模糊、技术杂乱无章，那么前端工程化将是你实现系统进阶的最佳路径。它不仅能帮你建立起对现代前端开发的整体认知，还能提升你在项目开发、协作规范、性能优化等方面的工程能力。

✅ 本课程覆盖构建工具、测试体系、脚手架、CI/CD 等核心模块，内容体系完整，贯穿从开发到上线的全流程。每一章节都配有贴近真实场景的企业级实战案例，帮助你边学边用，真正掌握现代团队所需的工程化能力，实现从 CRUD 开发者到工程型前端的跃迁。

详情请看前端工程化实战课程

如果你对此项目感兴趣，或者课程感兴趣，可以私聊我微信 yunmz777

🚀🚀🚀 基于 Create React App，我开源了一个全新的前端脚手架，支持用户灵活扩展