引言
在前端开发中，我们经常需要用到一些脚手架工具来快速搭建项目框架，提高开发效率。而 generator-add 就是这样一款基于 yeoman 的生成器，可以自动化创建项目文件、文件夹结构和一些基本配置，并且可以根据不同的使用场景自定义模板。
安装
使用 npm 命令进行全局安装即可：
npm install -g generator-add
使用
创建项目
使用 yo add 命令可以创建一个新的项目：
yo add
根据提示输入项目名称、描述、作者等信息即可。
添加模板
添加模板可以极大地提高生成文件的效率。首先，我们来看一下如何添加模板。
- 在项目的根目录创建模板文件夹，例如
template。 - 在模板文件夹中添加模板文件，例如
index.html。 - 在项目根目录下的
templates.json中添加模板配置：
{
"index.html": {
"type": "file",
"path": "./template/index.html"
}
}配置中，index.html 是模板的名字，type 是模板类型，有 file 和 directory 两种类型，分别对应文件和文件夹。path 是模板文件相对于项目根目录的路径。
生成项目
完成以上操作后，使用 yo add 命令即可生成项目，选择项目类型后还可以选择要使用的模板，如果没有选择，则使用默认的模板。
生成的项目中会包含一些文件夹和文件，例如：
├── index.html ├── src │ ├── components │ ├── config │ ├── index.js │ └── utils ├── package.json └── README.md
总结
除了上述基础使用方法之外，generator-add 还支持插件功能，可以通过插件在生成过程中插入一些自定义代码或配置。同时，yeoman 社区还提供了大量的生成器和插件供我们使用。
总之，学会使用 generator-add 等生成器可以大大提高前端开发效率，值得深入学习与使用。
示例代码
templates.json:
-- -------------------- ---- -------
-
------------- -
------- -------
------- -----------------------
--
------------------------ -
------- -------
------- ----------------------------------
--
--------------- -
------- -------
------- -------------------------
-
-index.html:
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------- ----------- ---------- ------- ------ ---- --------------- ------- ------------------------ ------- -------
src/components/App.js:
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
-----
------ ------
------
--
-
------ ------- ----src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005622181e8991b448df7db