在前端开发中，生成一个基于 React、Webpack 和 Babel 的应用程序是一个很常见的任务。虽然可以手动创建这些应用程序，但这需要花费大量的时间和精力。因此，有很多工具和框架可以帮助我们自动创建这些应用程序。
其中一个很受欢迎的工具是 generator-create-bapp，它是一个基于 Yeoman 的应用生成器，可以帮助我们快速创建一个基于 React、Webpack 和 Babel 的应用程序，而无需手动配置。
在本文中，我们将深入了解如何使用 generator-create-bapp 来创建一个基于 React 的应用程序，并探讨如何在我们的项目中自定义一些配置。
安装
首先，我们需要安装 Yeoman 和 generator-create-bapp。打开终端窗口并运行以下命令：
npm install -g yo generator-create-bapp
创建应用程序
接下来，我们要使用 generator-create-bapp 来创建我们的应用程序。运行以下命令：
yo create-bapp
这将开始一个交互式过程，让您选择您的项目的各种选项。
在这个过程中，您可以指定您想要使用的包管理器（npm 或 yarn），您的应用程序的名称，描述和作者等信息。
generator-create-bapp 预先集成了一些常用的软件包，在安装过程中，您可以选择安装它们，以便您快速开始开发：
react-router-dom：React 的路由器。axios：用于在 React 应用程序中进行 HTTP 请求的 Promise based 的 JavaScript 库。styled-components：使用 React 创建动态 CSS。material-ui：React 的可定制和可扩展的 UI 组件库。
您还可以选择添加 Redux、TypeScript、Testing 库和其它依赖项。
运行应用程序
安装和配置应用程序后，现在可以运行它并在浏览器中打开了。运行以下命令：
npm start
这将在您的浏览器中自动打开地址 http://localhost:3000。
如果您希望在开发中使用 HMR（热模块替换）功能，则可以运行以下命令：
npm start:dev
这将允许您在进行更改时实时更新应用程序界面。
自定义配置
尽管 generator-create-bapp 为我们提供了一个完整且功能丰富的应用程序，但它肯定不会兼容所有的需求。为了自定义一些配置，您可以编辑 /config 目录下的配置文件。
以下是一些可自定义的文件和选项：
webpack.config.js：完整的 Webpack 配置文件，您可以在此处更改任何选项。paths.js：应用程序的路径配置。devServerConfig.js：Webpack 开发服务器的配置。env.js：用于设置环境变量的选项。postcss.config.js：PostCSS 的配置。
添加新页面
我们可以使用 generator-create-bapp 来快速生成一些组件和页面，但您可能想要手动添加自己的页面。
首先，向 /src/pages 目录添加一个新文件夹。在这个文件夹中添加一个新的 React 组件，它将是您的新页面的入口点。您可以将其命名为 index.js。
如果您想要将这个页面添加到您的应用程序导航中，可以打开 /src/App.js 文件并添加导航项。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ -------- ---- ---------------
------ --------- ---- ----------------
------ ------- ---- --------------
-------- ----- -
------ -
--------
--------
------ -------- ----- -------------------- --
------ ------------- --------------------- --
------ ----------- ------------------- -- -- ------
---------
---------
--
-
------ ------- ----
现在，您可以通过在浏览器中访问 /new 的 URL，来访问您所创建的新页面。
自定义主题
generator-create-bapp 集成了 Material UI 来提供自定义主题。可以在 /src/theme 目录下找到 index.js。
您可以编辑颜色、字体和其他主题选项来更改您的应用程序的外观，如下所示：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------------------
------ ------ ---- ----------------------------------
------ ----- ---- ---------------------------------
----- ----- - ----------------
-------- -
-------- -
----- ----------
--
---------- ------
--
----------- -
----------- -
---------
---------- ------
--------
------------
------------
--- -
--------- -------
----------- ----
--
--- -
--------- -------
----------- ----
--
--- -
--------- ---------
----------- ----
--
------ -
--------- -------
--
------- -
-------------- -------
--
--
---
------ ------- ------
您可以在此处为不同元素指定字体，颜色和其他属性。在整个应用程序中使用这些主题，您可以使用 ThemeProvider 组件包装它们。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- - ---- ---------------------------
------ ----- ---- ----------
-------- ----- -
------ -
-------------- --------------
--- --- ---
----------------
--
-
------ ------- ----
结论
在本教程中，我们介绍了如何使用 generator-create-bapp 来创建一个基于 React、Webpack 和 Babel 的应用程序，并探讨了如何自定义一些配置，甚至增加自定义页面和主题。
Yeoman 是一个令人兴奋的工具，generator-create-bapp 发挥了 Yeoman 的强大功能，帮助我们以 非常高效的方式构建 React 应用程序。
我鼓励您去玩一玩，看看这些工具如何能够帮助您提高生产力。如果想查看完整的代码，可以前往 GitHub 获取源码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e681e8991b448d7887