前言
在前端开发中，每个项目都需要一些基本的文件结构，如 index.html、style.css、index.js等。为了避免手动创建这些文件，我们可以使用 npm 包 generator-starter-files 来快速生成一个前端项目的基本文件结构。
安装 generator-starter-files
首先，我们需要全局安装 yeoman 和 generator-starter-files。
npm install -g yo npm install -g generator-starter-files
使用 generator-starter-files
进入项目目录，运行以下命令：
yo starter-files
按照提示输入项目名称，选择需要的文件类型，即可生成项目的基本文件结构。当然，你也可以在项目中再次运行该命令来追加文件。
生成的文件结构
运行成功后，生成的文件结构如下：
-- -------------------- ---- ------- - --- ---- - --- --------- --- ---- - --- -------- --- --- - --- -------- --- ---------- --- ----------
此外，还会自动添加一些必要的配置文件，如 package.json、.gitignore 等。如下是 package.json 文件示例：
-- -------------------- ---- -------
-
------- -------------
---------- --------
-------------- ---
---------- -
-------- ------------- ----- -------- ------- ---------
--
------------------ -
--------------- ---------
-
-其中，browser-sync 是一个方便的开发工具，可以在本地启动一个服务器，自动刷新页面等。
文件类型列表
generator-starter-files 支持的文件类型如下：
- JS（增加 index.js 文件）
- CSS（增加 style.css 文件）
- Sass（增加 index.scss 文件和 _variables.scss 文件）
- Less（增加 index.less 文件和 _variables.less 文件）
- Stylus（增加 index.styl 和 _variables.styl 文件）
- Img（增加 img 文件夹和 .gitkeep 文件）
总结
使用 generator-starter-files 可以帮助我们快速创建一个基本的前端项目目录。同时，它也可以作为编写自己的 generator 的基础，为我们的前端开发提供方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f581e8991b448e0b3a