前言
在前端开发过程中，我们经常需要进行重复且模板化的工作，如创建新组件、新页面等。这些工作不仅繁琐，而且容易出错，影响开发效率和质量。为了解决这个问题，我们可以使用 node-plop 这个 npm 包，来实现快速生成模板化代码的目的。
node-plop 是什么
node-plop 是一个基于 Node.js 的脚手架生成器，它可以帮助我们快速创建出基于模板的文件。使用 plop，我们可以通过简单的命令，自动创建符合特定规范的代码文件，以减轻开发者的工作量。
如何安装 node-plop
使用 npm 进行 node-plop 的安装非常简单，只需要在终端中运行下面的命令即可：
npm install -g node-plop
快速上手
创建 plopfile.js 文件
使用 plop，需要在项目中创建一个 plopfile.js 文件，这个文件用于定义 plop 的行为和规则。我们可以使用下面的命令，在项目根目录下创建 plopfile.js 文件：
plop
在创建这个文件的过程中，会让你回答一些问题，如下图所示：
默认情况下创建的是一个组件模板，它包含以下文件：
- index.js
- style.css
- template.hbs
配置 plopfile.js
配置 plopfile.js 特别简单，只需要在 plopfile.js 文件中导出一个函数，这个函数就是我们的 plop 的配置规则。下面是一个简单的示例：
-- -------------------- ---- -------
-------------- - ---- -- -
------------------------------ -
------------ ------- - --- -----------
-------- -
-
----- --------
----- -------
-------- ----- -- ---- --------- ------
--
-
----- ----------
----- ---------------
-------- ---- ---------- -----------
-
--
-------- -
-
----- ------
----- --------------------------------------
------------- ------------------------------
--
-
----- ------
----- ----------------------------------------------
------------- -------------------------------------
-
-
--
-在这里我们定义了一个名为 'component' 的生成器，它将在 src/components 目录下创建一个组件文件，并将模板文件 plop-templates/Component.txt 复制到这个目录。另外，我们使用了 prompts 来让用户输入组件名以及组件类型信息。
执行 plop
完成了配置后，我们就可以使用 plop 命令来生成组件文件了。使用下面的命令启动 plop：
plop
执行该命令后，plop 会弹出一些提示信息，让你拼装组件。在一系列的问答和交互之后，plop 会根据我们在 plopfile 中定义的规则创建一个符合要求的组件。如下图所示：
执行完毕之后你就可以在你项目的src/component目录下面看到名为 test 的目录，里面有生成的文件。
参数
上面的例子可能太简单了，我们在这里再讲下如何传递参数，在我们自定义的生成器中可以自己动态调整参数。
例如使用 npm 包 lodash 后我们可以将自带的参数覆盖掉，也可以传递一个新的参数，举个例子：
-- -------------------- ---- -------
----- - - ------------------
-------------- - -------- ------ -
------------------------- -
-------- -
-
----- -------
-------- -------
--
--
-------- -------- ------ -
----- ---- - ---------------------
----- --- - ----- -- ------- ----------
------------- ----- --- --
------ -
-
----- ------
----- -------------------
------------- -----------------------------
----- -
---- ---
-
-
--
--
---
--在这个例子中我们使用了 lodash 中的 toLower 方法将组件名转化为小写。另外，在 actions 里面设置了新的参数并将这个参数注入到了 plopfile 中的模板文件中：
{
templateFile: 'templates/component.js.hbs',
data: {
str: str
}
}模板文件中我们可以获取到这个额外的参数 str 并使用它，例如：
{{str}}更多详情请参考 plop 官方文档。
总结
plop 并不仅仅可以用于生成模板，在模板生成后我们也可以在模板中嵌入业务逻辑，使得模板不再是一个简单的文件复制过程，最终目的是实现高效率的开发。如果你还没有使用过 plop，相信这篇文章对你会有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb735b5cbfe1ea0611779