前言
在前端开发中，我们经常需要创建新的项目或者在已有的项目中新增模块，这个过程往往需要我们手动创建文件夹、编写模版代码等操作，费用很多时间和精力。 因此，为了方便快捷的完成这些工作，我们可以使用 Scaffolding 工具来生成前端项目或者新增模块代码。
在 Node.js 世界中，一个非常流行的 Scaffolding 工具是 Yeoman，但是 Yeoman 并不是唯一的选择，还有另外一个工具可以帮助我们实现类似的功能，那就是 npm 包 scaffolder。
本文主要介绍如何使用 npm 包 scaffolder 来生成前端项目或者新增模块。
npm 包 scaffolder
npm 包 scaffolder 是一款轻量级的 Scaffolding 工具，通过简单的配置文件，我们可以实现快速生成前端项目或者新增代码模块的目标。
npm 包 scaffolder 相关文档：https://github.com/complex-components/scaffolder
安装
全局安装 scaffolder，使用如下命令可以对 npm 包全局安装：
npm install scaffolder -g
使用步骤
1.创建一个新项目或者在已有的项目中新增模块；
2.在项目根目录下新建一个名为 scaffolder.config.js 的文件，文件内容为：
-- -------------------- ---- -------
-------------- - -
-- ----
---------------- -----------------
-- ----
------------- -
-
-- ----
----- ---------
-- -------
------------- -------------------------------
--
--
--- targetDirectory：目标文件夹，即文件生成的目标存放区域
- templateList：模版列表，包括每个模版的名称和对应的路径
创建模版时，可以根据实际需求使用不同的模版库，例如：YourName/scaffolding-templates。
3.在命令行中输入如下命令，生成模版独有的代码到目标区域中：
scaffolder --action=generate --name=button
- action：必填，代表功能，此处表示生成代码
- name：必填，代表模版名称，与 scaffolder.config.js 中的一致
执行成功后，命令行提示代码生成成功。
示例
生成新项目
首先，创建一个名为src的文件夹，用于存储项目代码。
接下来，我们需要新建一个 scaffolder.config.js 的配置文件，并定义好目标区域以及对应的生成原型文件。
-- -------------------- ---- -------
-------------- - -
---------------- ------
------------- -
-
----- --------------
------------- ------------------------------------
--
--
--其中，basic-setup 代表项目原型文件名，scaffolding-templates/basic-setup代表项目原型文件所在位置。
然后，执行如下命令，src 目录下会生成具备 basic-setup 的新项目代码：
scaffolder --action=generate --name=basic-setup
当然，你也可以根据实际需要在生成过程中添加更多的模版以达到更多的功能。
生成模块
在已有的项目中新增模块时，目标区域需要指定为对应模块文件夹，比如src/components。
在 scaffolder.config.js 中添加例子：
-- -------------------- ---- -------
-------------- - -
---------------- -----------------
------------- -
-
----- ---------
------------- -------------------------------
--
--
--其中，button 代表模块原型文件名，scaffolding-templates/Button 代表模块原型文件所在位置，模块的实现细节根据原型文件决定。
执行如下命令可以生成具有 button 模块的代码：
scaffolder --action=generate --name=button
至此，我们就成功地使用了 npm 包 scaffolder。scaffolder 可以帮助我们快速生成前端项目或者新增模块代码，大大节省了我们的时间和精力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76996