前端脚手架：Create React App源码解析（深入篇）

2024-01-04 10:42:34

在上一篇博文，我们对Create React App的构建过程和一些主要功能进行了初探，希望这次能帮助您更深入地了解其源码。我们从哪里开始呢？

从`package.json`追根溯源

作为前端开发者的得力助手，Create React App为我们提供了许多实用的功能，其中包括：

脚手架初始化：create-react-app命令可以快速创建一个新的React项目。
脚本命令：npm run命令可以运行各种预定义的脚本任务，比如start启动开发服务器，build打包生产代码。
热重载：在开发过程中，修改代码后，浏览器会自动刷新，无需手动刷新页面。
代码分割：Create React App自动将代码分割成多个小的包，以便更快地加载。
路由：Create React App提供了开箱即用的路由功能，方便管理页面间的跳转。

Create React App的强大功能离不开其精心编写的源码。让我们从package.json开始，探寻这些功能背后的奥秘。

{
  "name": "create-react-app",
  "version": "5.0.1",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "jest": "^29.4.0"
  }
}