Yeoman: 使用用户提供的参数调用子生成器

阅读时长 4 分钟读完

Yeoman 是一个现代化的脚手架工具,可以帮助前端开发者快速生成项目的骨架,并自动安装所需的依赖库。Yeoman 的一个重要特点是它支持插件式的生成器体系结构,这使得开发者可以根据自己的需求和偏好选择不同的生成器来构建项目。

在 Yeoman 中,子生成器是一种可以由其它生成器调用的生成器。子生成器通常用于生成特定功能或组件的代码。例如,在一个 Web 应用程序生成器中,可能会有一个子生成器用于创建路由器模板,另一个子生成器用于创建控制器模板。

本文将讨论如何使用 Yeoman 调用子生成器并向其传递用户提供的参数。我们将以一个简单的示例为基础进行讲解。

示例:创建一个 Vue 组件生成器

我们将创建一个 Yeoman 生成器,用于生成 Vue 组件的骨架代码。该生成器将使用 vue-cli-service 来构建组件,并使用 Jest 进行单元测试。

首先,我们需要安装 Yeoman 和相关的生成器:

接下来,我们可以使用 yo generator 命令创建一个新的生成器项目:

在向导中输入生成器的名称、描述等信息后,我们可以看到生成了如下的文件和目录结构:

-- -------------------- ---- -------
-
--- -----------
-   --- ----
-       --- --------
-       --- ----------
-           --- -------------
--- -------------
--- --------------
--- ----------
--- ----------
--- ------------
--- ---------
--- -------

其中,generators/app/index.js 文件是生成器的入口点,我们需要在其中编写代码来定义生成器的行为。

我们将在 index.js 文件中添加一个子生成器,用于创建 Vue 组件。该子生成器将接收组件名称、组件描述等参数,并使用模板引擎生成组件的骨架代码。

-- -------------------- ---- -------
----- --------- - ----------------------------
----- ----- - -----------------

-------------- - ----- ------- --------- -
  ----------- -
    ----- ------- - -
      -
        ----- --------
        ----- -------
        -------- ------ --- --------- -------
        -------- -------------
      --
      -
        ----- --------
        ----- --------------
        -------- ------ --- --------- --------------
        -------- -- --- ----------
      -
    --

    ------ --------------------------------- -- -
      ------------ - --------
    ---
  -

  --------- -
    ----- - ----- ----------- - - -------------

    ----------------
      -----------------------------------
      ------------------------------------
      - ----- ----------- -
    --
  -
--

在上面的代码中,我们使用 prompting() 方法定义了两个询问问题,分别用于获取组件名称和描述。然后,我们在 writing() 方法中使用 fs.copyTpl() 方法将 component.vue 模板文件复制到目标位置,并使用模板引擎替换其中的变量。

现在,我们可以测试生成器是否正常工作。在项目根目录下创建一个名为 test 的目录,并在该目录下运行 yo vue-component 命令,输入组件名称和描述。然后,我们应该能够在当前目录下看到生成的组件文件。

使用用户提供的参数调用子生成器

上面的示例中,我们定义了一个简单的子生成器,它只接收了两个硬编码的参数。如果我们想要使子生成器更加灵活,并且能够接收来自用户的自定义参数,该怎么办呢?

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/29181

纠错
反馈