前言
开发前端项目往往需要做很多繁琐的操作，如初始化项目、添加目录结构、配置 Webpack 等等。这些操作虽然简单，但是花费的时间也不容忽视。为了提高开发效率，我们可以利用 Yeoman 和 npm 包 generator-js-starter 快速搭建一个 React 项目的基本框架。
Yeoman 简介
Yeoman 是一款前端脚手架工具，可以帮助我们快速搭建项目骨架，生成代码和文件等。它结合了三个工具：yo、grunt/gulp 和 bower/npm。其中，yo 负责生成项目的骨架，grunt/gulp 负责构建和开发，bower/npm 负责管理项目的依赖。Yeoman 具有规范性、模板化和插件化三个特点，能够快速提高开发效率。
generator-js-starter 简介
generator-js-starter 是 Yeoman 的一个子生成器，专门用于生成 JavaScript 项目的基本骨架。它可以创建一个基于 React，Webpack，babel 和 eslint 的项目模板，包含了基础的目录结构和配置文件。通过使用 generator-js-starter，我们可以省去很多初始化项目、配置文件等繁琐的操作，避免因为配置出错耗费宝贵时间。
现在，我们就一步步来学习如何使用 npm 包 generator-js-starter 来初始化 React 项目骨架。
安装
在开始前，我们需要安装 Yeoman 和 generator-js-starter。如果您还未安装 Yeoman，请先执行以下命令：
npm install -g yo
安装 Yeoman 后，我们可以通过以下命令安装 generator-js-starter：
npm install -g generator-js-starter
安装完成后，我们就可以使用 generator-js-starter 命令来创建一个 React 项目骨架了。
创建项目
- 创建一个项目文件夹，并进入该文件夹。
mkdir my-react-project && cd my-react-project
- 通过以下命令创建项目骨架：
yo js-starter
执行以上命令后，Yeoman 会提示您选择一些配置选项，例如选择 Webpack 版本、是否使用 Redux 等等。
- 根据提示完成配置后，Yeoman 会生成项目的骨架和配置文件。这个过程可能需要一些时间，请耐心等待。
-- -------------------- ---- -------
-
--- ---------
--- ------------
--- -----------------
--- ---
- --- --------
- --- ------
- --- ----------
--- ----
--- ----------
--- ---------现在，我们已经成功创建了一个 React 项目的基本骨架，可以通过以下命令运行项目：
npm start
打开浏览器，访问 http://localhost:8080/，您应该能看到 React 应用的界面。
配置说明
generator-js-starter 的默认配置符合大部分项目的需求，但如果您需要更个性化的配置，可以在项目创建完成后自行修改配置文件。
以下是项目结构和配置文件的说明：
- webpack.config.js：Webpack 的配置文件，包括入口、输出、模块加载器等等。
- index.html：React 应用的入口 HTML 文件。
- package.json：项目的配置文件，包括项目名称、版本号、依赖库等等。
- src/index.js：React 应用的入口 JavaScript 文件，初始化 React 应用和渲染 UI。
- src/App.js：React 应用的主要组件，用于渲染 UI。
总结
通过使用 npm 包 generator-js-starter，我们可以快速搭建一个基于 React，Webpack，babel 和 eslint 的项目模板，节省了初始化项目、配置文件等繁琐的操作。Yeoman 和 generator-js-starter 的使用，使得前端开发更加高效、规范和快速，是前端开发者必备的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bdc81e8991b448d9818