如果你是前端开发人员，那么你一定会使用 React.js 进行前端几近现代工程开发。generator-berton-react 是一个基于 Yeoman 的 React.js 项目生成器，它可以为项目快速地生成一些基础骨架，并且可以根据需要进一步配置项目结构和开发环境。本篇文章将介绍 npm 包 generator-berton-react 的使用教程，内容详细且有学习和指导意义。
安装 Yeoman
在使用 generator-berton-react 之前，首先需要安装 Yeoman。打开终端，执行以下命令：
npm install -g yo
安装 generator-berton-react
接下来，使用 npm 安装 generator-berton-react，执行以下命令：
npm install -g generator-berton-react
创建新项目
使用以下命令创建新项目：
yo berton-react
之后，你需要输入项目名称：
? Your project name: my-app
Yeoman 会自动下载所需的依赖和模板代码，并为你创建一个新项目。
配置项目
generator-berton-react 分为两种类型的项目模板：
- web page
- ui library
其中，web page 用于创建单页应用，而 ui library 则用于创建可复用的组件库。
对于 web page 的项目，Yeoman 会问你是否需要使用路由器，是否需要添加状态管理器。对于 ui library 的项目，Yeoman 会问你是否需要自动生成文档。
在这里我们以 web page 类型的项目为例。当你选择了 "use router" 和 "use state manager" 之后，Yeoman 会问你是否需要选择路由和状态管理器的类型。这里我们选择 React Router 作为我们的路由器，Redux 作为我们的状态管理器。
配置 React Router
generator-berton-react 支持以下类型的 React Router：
- None
- React Router Dom (for browsers)
- React Router Native (for mobile apps)
对于 web page 的项目，我们选择 React Router Dom。执行以下命令配置：
? Use router? Yes ? Which router do you want to use? React Router Dom
配置 Redux
generator-berton-react 支持以下类型的状态管理器：
对于 web page 的项目，我们选择 Redux。执行以下命令配置：
? Use state manager? Yes ? Which state manager do you want to use? Redux
项目结构
对于 React Router 的项目，generator-berton-react 会创建以下的基础骨架：
-- -------------------- ---- ------- ------- --- ------- - --- ----------- - --- ---------- - --- ------------- --- ---- - --- ------- - - --- ----------- - - - --- ------------- - - - --- ----------------- - - --- --------- - - --- -------- - - --- -------- - --- ----------- - --- -------- - --- ----------------- - --- -------- - --- ---------- --- -------- --- ------------ --- ---------- --- ----------------- --- ------------
对于 Redux 的项目，生成器会在代码中自动添加所需的模板和依赖项。
运行项目
安装完所有依赖后，使用以下命令启动应用程序：
npm start
该命令将启动开发服务器，并在浏览器中打开一个新的地址。在开发模式下，应用程序将自动重新加载。
打包项目
在项目开发完成后，可以使用以下命令打包项目：
npm run build
执行该命令会在项目根目录生成一个 build 文件夹，其中包含所有打包后的静态文件。这些文件可以直接拷贝到生产服务器上。
总结
generator-berton-react 提供了一种快速、方便的方式来创建 React.js 项目，使开发更加高效。此外，该生成器还提供了许多可供配置的选项，以便根据不同的需求调整项目结构和开发流程。我们希望这篇文章帮助你更好地使用 generator-berton-react，提高 React.js 开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ea81e8991b448e0992