generator-web-vanilla-static 是一个前端 Web 项目生成器，通过使用此 npm 包，可快速创建一个基于纯静态 Web 技术栈的前端项目，并附带一些常用的工具与配置，使得开发者可以更快速地开始 Web 开发工作。本文将为你详细介绍如何使用 generator-web-vanilla-static 这个工具包。
1. 安装
首先需要安装 Node.js 环境以及 npm 包管理器，之后运行以下命令安装 generator-web-vanilla-static：
npm install -g yo generator-web-vanilla-static
2. 使用
运行以下命令创建一个新项目：
yo web-vanilla-static
此时，你将被问到一些问题来帮助你配置项目，例如：
- 项目名称
- 是否使用 Sass 编译器
- 是否使用 Git 进行版本管理
回答完毕后，generator-web-vanilla-static 将自动生成一个Web项目模板，包含常用文件与目录。
3. 文件与目录结构
生成的模板目录结构如下所示：
-- -------------------- ---- ------- - --- ---- - --- --- - --- --- - --- -- --- ------------ - --- --- - --- --- --- --- - --- --- - --- -- - --- ---- - --- ---------- - --- --- --- ------------- --- ---------- --- ----------- --- ------------ --- --------- --- -----------------
其中，dist 目录为生成的静态文件目录，浏览器可直接访问此目录下的 index.html 文件查看前端页面效果。
在 src 目录中，包含基础的前端文件，例如 CSS、JS、图片等。对于 Sass 编译器，开启此选项后，src/scss 目录下的 .scss 文件将被编译为 CSS 文件输出至 dist/css 目录中。
.editorconfig 文件用于编辑器统一代码风格，.gitignore 文件用于 Git 版本管理忽略不必要的文件，.yo-rc.json 为 generator-web-vanilla-static 项目的配置文件，package.json 为 npm 包依赖文件。
webpack.config.js 为整个项目的构建工具，内部集成了一些基础的 Webpack 打包配置，可以通过修改此文件来进行更加细致的项目构建工作。
4. 示例代码
以下是一个在项目主页中显示Hello, World!的 HTML 示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- ------- ------------ ----- ---------------- -------------------- ------- ------ ---------- ----------- ------- ---------------------- -------------------------- ------- -------
在 src/js/main.js 文件中，添加以下 JavaScript 代码即可使得项目页面显示出 Hello, World!：
console.log('Hello, World!');至此，你已经成功创建了一个基于 generator-web-vanilla-static 的静态 Web 项目，并且已经知道了如何创建和修改项目文件，以及如何使用生成器所提供的工具和配置。现在，你可以根据自己的需要和偏好，按照自己的思路来完成一个前端项目！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573a581e8991b448e9a1a