npm 包 generator-betters 使用教程

阅读时长 7 分钟读完

generator-betters 是一个用于创建 Web 开发项目的 Yeoman Generator(脚手架工具),通过它可以快速初始化一个完整的前端工程项目,同时也可以根据自己的需求来定制项目结构和配置,非常实用便捷。

安装

在使用 generator-betters 之前,我们需要先安装 Yeoman 和 Generator-betters:

如果你还没有安装 Node.js,请先完成 Node.js 的安装,安装 Node.js 可以到官网下载 Node.js 安装包,或使用包管理器进行安装。

使用 generator-betters

使用 generator-betters 创建工程项目十分简单,只需要在命令行中输入以下命令即可:

然后按照提示输入项目名称、项目描述和作者等信息,最后就可以选择需要安装的插件以及创建项目结构。

自定义 generator-betters

除了使用默认的模板之外,我们还可以自己进行定制的 Yeoman Generator。生成器内部使用了基础的模板语法来简化开发、提升重用性和依赖于 Node.js 的功能,同时也能够生成可读性强的开发指南。

首先,在命令行工具中,使用 yo 命令新建一个 generator:

根据提示输入生成器的名称、描述等信息,可以看到在当前目录下会生成一个文件夹,其中包含了一个空白的生成器项目。

我们需要修改的文件主要包括:

  1. generator/app/index.js: 描述生成器的行为以及所执行的操作,例如将文件复制到新项目目录、渲染文件,等等。

  2. generator/templates: 包含用于生成新项目的文件和文件夹。

在 generator/app/index.js 文件中,我们可以修改 Generator 的 options,从而指定所需要的功能特性。例如,可以创建一个包含测试文件的选项,如下所示:

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

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

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

在 generator/app/index.js 文件中,我们也可以使用 this.prompt() 方法,为命令行询问用户参数。例如,可以询问用户是否需要添加 jQuery:

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

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

在 generator/app/index.js 文件中,我们还可以使用 this.fs.copy() 方法,从模板文件夹将文件复制到要生成的项目目录。例如,可以复制一个 .gitignore 文件:

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

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

在完成所有定制之后,我们可以将生成器发布到 npm 上,其他人也可以使用我们的生成器来生成项目。

示例代码

以下是一个生成 React 项目的示例代码:

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

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

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

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

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

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

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

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

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

纠错
反馈