#npm 包 generator-things 使用教程
随着前端技术的发展，前端开发的工具也日新月异。其中一个非常重要的工具就是 npm，npm 提供了一个庞大的包管理系统，可以让前端开发者更加高效地完成工作。
在 npm 的包管理系统中，有一个非常有用的包叫做 generator-things，它是一个 Yeoman generator，可以快速创建出前端开发中常用的文件结构和代码框架，帮助开发者更加高效地完成开发工作。
generator-things 的安装和使用
要安装 generator-things，需要先安装 Node.js 和 npm。安装完成后，在命令行输入以下命令：
npm install -g yo generator-things
安装完成后，可以通过以下命令来创建一个新的项目文件夹：
yo things
然后，generator-things 会问你一些问题，根据你的回答来生成一个合适的项目结构。例如：
? What do you want to name your thing? my-project ? What kind of thing is it? (Use arrow keys) ❯ Web app (will make an Express app with some front-end stuff) Node package (some files and config for a Node module) Browser library (UMD-compatible re-usable component)
这些问题会让你指定项目的名称和类型，在这个例子中，我们选择了 Web app。然后，generator-things 会根据你的选择自动创建一个基础的 Express 应用程序，包括一些常用的文件和文件夹。
generator-things 的文件结构
当你使用 generator-things 创建一个项目时，生成的文件结构如下：
my-project/ ├── bin/ │ ├── www ├── public/ │ ├── images/ │ ├── javascripts/ │ └── stylesheets/ │ └── style.css ├── routes/ │ ├── index.js │ └── users.js ├── views/ │ ├── error.jade │ ├── index.jade │ └── layout.jade ├── .eslintignore ├── .eslintrc ├── .gitignore ├── app.js ├── package.json └── README.md
这是一个标准的 Express 应用程序文件结构，包括了一些常见的文件和文件夹，例如路由、视图和静态文件。如果你按照我们之前的指导选择了 Browser library ，那么生成的项目结构将有所不同。
generator-things 的项目类型
generator-things 支持创建不同类型的项目，包括 Web 应用程序、Node.js 包和浏览器库等。在创建项目时，你可以选择你需要的类型。下面是一些类型的描述：
- Web app：给你创建一个基本的 Express 应用程序，包括路由、视图和静态文件目录结构。这对于创建 Web 应用程序非常有用。
- Node package：创建一个基础的 Node.js 包结构，包括一些常用的文件和文件夹。这对于开发 Node.js 模块非常有用。
- Browser library：创建一个 UMD 兼容的浏览器库结构，包括一些常用的文件和文件夹。这对于开发浏览器端的 JavaScript 库非常有用。
generator-things 的插件机制
generator-things 还支持插件机制，可以让你快速地集成一些常见的功能和工具，例如 Bootstrap、SASS、React 等。这些插件可以通过 NPM 安装，然后在创建项目时使用。例如：
yo things --plugin bootstrap
这个命令会生成一个带有 Bootstrap 插件的项目结构。当然，你可以使用其他插件来替换 Bootstrap，只要你按照插件的文档并正确进行配置就可以了。
generator-things 的总结
generator-things 是一个非常有用的工具，可以帮助前端开发者更加高效地完成工作。使用它可以快速创建出常用的项目结构和代码框架，而且还支持插件机制，可以集成一些常见的功能和工具。如果你是一名前端开发者，那么请尝试使用 generator-things，相信它一定能够帮助你更好地完成你的工作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53b96