React Scripts 项目教程

React Scripts 项目教程

react-scripts⚙ shared react app configs项目地址:https://gitcode.com/gh_mirrors/re/react-scripts

1. 项目的目录结构及介绍

react-scripts/
├── bin/
│   └── react-scripts.js
├── config/
│   ├── env.js
│   ├── getHttpsConfig.js
│   ├── jest/
│   │   ├── cssTransform.js
│   │   └── fileTransform.js
│   ├── modules.js
│   ├── paths.js
│   ├── webpack.config.js
│   └── webpackDevServer.config.js
├── scripts/
│   ├── build.js
│   ├── start.js
│   └── test.js
├── template/
│   ├── public/
│   │   └── index.html
│   └── src/
│       ├── App.css
│       ├── App.js
│       ├── App.test.js
│       ├── index.css
│       ├── index.js
│       └── logo.svg
├── package.json
└── README.md

目录结构介绍

• bin/: 包含项目的可执行文件，如 react-scripts.js，用于启动、构建和测试项目。
• config/: 包含项目的配置文件，如 Webpack 配置、Jest 配置等。
• scripts/: 包含项目的脚本文件，如 build.js、start.js 和 test.js，分别用于构建、启动和测试项目。
• template/: 包含项目的模板文件，如 public/ 目录下的 index.html 和 src/ 目录下的源代码文件。
• package.json: 项目的依赖管理文件，包含项目的依赖包和脚本命令。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

bin/react-scripts.js

这是项目的入口文件，用于启动、构建和测试项目。通过命令行运行 react-scripts start、react-scripts build 或 react-scripts test 时，会调用此文件。

scripts/start.js

此文件用于启动开发服务器。它会读取配置文件并启动 Webpack Dev Server，以便在开发过程中实时预览和调试代码。

scripts/build.js

此文件用于构建生产环境的代码。它会读取配置文件并使用 Webpack 打包代码，生成优化后的生产版本。

scripts/test.js

此文件用于运行测试。它会读取配置文件并使用 Jest 运行测试用例，确保代码的正确性。

3. 项目的配置文件介绍

config/webpack.config.js

这是 Webpack 的主要配置文件，定义了如何打包和处理项目中的各种资源文件，如 JavaScript、CSS、图片等。

config/webpackDevServer.config.js

这是 Webpack Dev Server 的配置文件，定义了开发服务器的相关配置，如端口号、热更新等。

config/jest/cssTransform.js 和 config/jest/fileTransform.js

这些文件是 Jest 的配置文件，定义了如何处理 CSS 和文件的转换，以便在测试环境中正确运行。

config/paths.js

此文件定义了项目中各种路径的配置，如源代码路径、输出路径等。

config/env.js

此文件用于处理环境变量，确保在不同环境下（开发、生产等）能够正确加载和使用环境变量。

通过以上介绍，您可以更好地理解和使用 react-scripts 项目，快速上手并进行开发。

react-scripts⚙ shared react app configs项目地址:https://gitcode.com/gh_mirrors/re/react-scripts