随着前端技术的不断发展，构建工具在前端项目开发中扮演着越来越重要的角色。而 generator-whs 就是一个基于 Yeoman 的前端构建工具，适用于 Three.js/WebGL 开发。
本文将详细介绍如何使用 generator-whs，帮助读者快速上手该工具。
1. 安装 generator-whs
首先，我们需要在本地安装 generator-whs 和 Yeoman，这可以通过 npm 快速完成。
npm install -g generator-whs yo
安装完成后，就可以开始使用 generator-whs 来生成项目了。
2. 使用 generator-whs
在命令行界面中输入以下命令来创建一个新项目：
yo whs
运行命令后，你需要依次输入项目名称、作者名、项目描述等信息。按照提示一步一步操作，等待命令行工具为我们自动生成文件即可。
此时，你就已经初始化了一个全新的 generator-whs 项目。
进入项目目录，通过以下命令安装项目依赖：
npm install
项目依赖完成后，你就可以运行项目啦！
npm run dev
此时，在浏览器中访问 localhost:8080，就可以看到你的项目页面了。
3. generator-whs 配置文件
在 generator-whs 项目中，我们可以通过 whs.config.js 文件来进行一些基本配置。
在该文件中，可以设置页面模板、打包输出目录、webpack 配置等。
以设置页面模板为例，在 whs.config.js 中添加以下代码：
module.exports = {
template: 'path/to/template.html',
};这样，每次生成的项目就会使用指定的模板 html 文件。
4. generator-whs 样例
generator-whs 本身也提供了一些样例项目，可以供我们参考学习。
在项目目录下，我们可以通过以下命令来初始化一个样例项目：
yo whs:example
该命令会在当前目录下创建一个名为 “example” 的样例项目，包含了一些基本的 Three.js/WebGL 代码。
结语
通过本文的介绍，我们已经初步掌握了如何使用 generator-whs 来打造 Three.js/WebGL 项目。
当然，generator-whs 并不是唯一的前端构建工具，我们可以根据实际情况进行选择。
希望本文能对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005528281e8991b448cffc8