前端开发中，构建 React 应用是一个常见的任务。其中，webpack 和 babel 等工具的配置是至关重要的。如果你希望能够快速搭建一个 React 应用，那么 npm 包 @himenon/generator-react-app 可以帮助你自动生成一个简单的 React 应用，并且集成了常用的 webpack 和 babel 配置。
本文将介绍如何使用 @himenon/generator-react-app。我们将分步骤地展示如何使用 npm 包生成一个全新的 React 项目，并了解它的一些基本配置。
安装
首先，你需要安装 Yeoman generator。如果你已经全局安装了 Yeoman，那么可以跳过这一步。否则，使用以下命令安装：
npm install -g yo
安装好 Yeoman generator 后，接下来就可以安装 @himenon/generator-react-app 了：
npm install -g @himenon/generator-react-app
此时，你就可以使用 @himenon/generator-react-app 了。
创建项目
在你想要创建的目录下，打开终端并执行以下命令：
yo @himenon/react-app
这时，你将会看到一个交互式的命令行界面。按照提示输入项目相关的信息，如项目名称、作者名等等。
输入完成后确认无误，项目就会被自动生成。在这个过程中，npm 会在后台运行。
这些命令将生成一个全新的 React 项目，并且使用 webpack 和 babel 来构建。如果一切顺利，页面应该会自动重载，这样你就可以开始写代码，并且查看它在浏览器中的效果了。
目录结构
项目被创建后，你将看到生成了以下目录结构，其中包括：
-- -------------------- ---- ------- - --- --------- --- ------------ --- ------------ --- ------ - --- ----------- - --- ---------- - --- ------------- --- --- - --- ------- - --- ------ - --- ----------- - --- --------- - --- -------- - --- -------- - --- ---------------- --- ---------
package.json用于存储项目信息和配置。public/目录包含了一些公共的静态文件，例如index.html。src/目录包含了项目的源代码，其中包括一个根组件App.js和一个入口文件index.js。
运行项目
执行以下命令，就可以在预设的浏览器端口（默认为3000）打开默认的 React App：
yarn start
这时，你应该能看到一个类似如下的页面：
构建项目
运行以下命令，可以将项目构建为一个生产环境的版本：
yarn build
这个命令将会在项目根目录下生成一个 build 目录，其中包含了可以在生产环境下运行的已优化过的版本。你可以通过直接访问 build 目录中的 HTML 文件来启动应用。
自定义配置
如果你希望在项目中增加新的 webpack 和 babel 配置，只需要在项目根目录下新建一个 .webpackrc.js 文件，然后输入以下代码：
export default {
// your webpack config here
// your babel config here
};通过使用该配置文件，你可以覆盖默认配置，从而拥有更多的自定义能力。
结论
通过使用 @himenon/generator-react-app，你可以快速地生成一个全新的 React 应用，并且自动集成了常用的 webpack 和 babel 配置。本文介绍了如何使用该 npm 包，以及如何构建和运行你的 React 应用。
如果你在使用过程中遇到任何问题，可以查看项目文档，或者通过 GitHub Issues 来寻求帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067354890c4f72775839fc