在前端开发中，我们经常需要根据项目需求生成一些模板文件或者代码。这时就可以使用 yeoman 这样的工具。而 generator-hr 就是一个基于 yeoman 的前端项目生成器，它可以帮助我们快速创建一个基于 webpack 的前端项目。
安装
安装 generator-hr 可以通过 npm 来完成，打开终端（命令行）并输入以下命令：
--- ------- -- -- ------------
接下来你需要等待一段时间，等待安装完成即可。
使用
使用 generator-hr 创建项目非常简单，只需要执行以下命令即可：
-- --
执行上面的命令后，会看到 generator-hr 提供的几个选项：
- What do you want to call your project?
- Use Sass?
- Use ESLint?
- Use Jest?
- Use Redux?
按照提示输入相应的选项即可开始创建项目。
选项解释
- What do you want to call your project?
这个选项是用来输入项目名称的，可以输入任何你想要的名称。
- Use Sass?
这个选项用来选择是否使用 Sass，如果你选择使用 Sass，生成的项目会自动配置好 Sass。
- Use ESLint?
这个选项用来选择是否使用 ESLint，如果选择使用，生成的项目会自动配置好 ESLint。
- Use Jest?
这个选项用来选择是否使用 Jest，如果选择使用，生成的项目会自动配置好 Jest 作为单元测试工具。
- Use Redux?
这个选项用来选择是否使用 Redux，如果选择使用，生成的项目会自动配置好 Redux。
示例代码
下面是一个生成的项目的示例代码：
--- ------------- --- ------- --- --- ---------- --- --- ----------- --- ---- --- --- -------- --- --- ----------- --- --- ----------- --- --- --------- --- --- ------ --- --- -------- --- --- -------- --- -------- --- --------- --- ---------- --- -------------- --- ----------------- --- ------------ --- -----------------
其中：
/node_modules存放着项目所需要的依赖包。/public存放着项目的 html 模板和 favicon。/src存放着项目的源代码。.babelrc、.eslintrc、jest.config.js和webpack.config.js是项目的配置文件。package-lock.json和package.json是项目的依赖管理文件。
至此，你已经成功使用 generator-hr 创建了一个基于 webpack 的前端项目。接下来就可以根据需要开始编写代码了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005573d81e8991b448d4322