如何使用 Yeoman 构建工程化项目

领航猿麦兜
891 阅读8分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。 导致产生事务的根源就是分库分表。

Yeoman 初始

时至当下，React.js、Vue.js 以及 Angular.js 大行其道，这些框架的官方都提供了更为集成的脚手架工具链。所以在谈论到脚手架时，往往最先想到的都是它们官方提供的工具。对于这一类的工具，因为它太过针对于某一个框架，而且在使用上也非常的普及，我们就不做过多的介绍。这里我们着重的去探讨 Yeoman 这样一款工具。

因为 Yeoman 作为最老牌、最强大、最通用的一款脚手架工具，它有更多值得我们借鉴和学习的地方。

论定义，肯定还是找最权威的官方定义为好。Yeoman 官网定义 yeoman.io/。

image.png

不同于 vue-cli 这样的工具，Yeoman 更像是一个脚手架的运行平台。我们可以通过 Yeoman 搭配不同的 generater 去创建任何类型的项目，也就是说我们可以通过创建自己的 generater，从而去定制属于我们自己的前端脚手架。

Yeoman 优点同样也是它的缺点，在很多专注基于框架开发的人眼中，Yemen 过于通用、不够专，所以更愿意使用像 vue-cli 这类的脚手架，这也是像 vue-cli 这类的工具，它为什么现在变得这么成功，但是这个并不妨碍我们去学习 Yeoman。

接下来我们就快速去了解一下 Yeoman 的用法，以及 generator 的工作原理，为我们后面去开发自己的脚手架做出准备。

Yeoman 使用

那接下来我们具体来看 Yeoman 这款通用型脚手架工具的基本使用。从前面介绍，知道了 Yeoman 是一款基于 Node.js 开发的一个工具模块。使用的第一步自然是通过 npm 在全局范围去安装它。当然使用 npm 去安装模块的前提是你需要在机器上正常的安装 node 环境。

环境准备

先来检查 Node 环境是否有问题，在键盘按下【win+R】键，输入cmd，然后回车，打开cmd窗口。

image.png

在 Windows 命令窗口输入 node -v 和 npm -v，显示如下结果，说明我们 Node.js 和 npm 环境没有任何问题。   image.png

在使用 npm 的时候，通过另外一个工具去取代它，yarn 这款工具。yarn 跟 npm 在很多使用上面都是类似的，只不过个人觉得它的体验会更加好一点。所以在后续使用 npm 模块的时候，都会采用 yarn 安装。

npm 是 Node.js 自带工具，yarn 不是，需要安装 yarn 工具，安装命令 npm install -g yarn 安装yarn，查看 yarn 是否安装成功命令 yarn -v。

  image.png

安装 yarn 之后，设置 yarn 的全局安装，安装命令 yarn global add yo，yo 这款工具就是 yarn 的工具模块的名字。

image.png

yarn 安装成功之后，我们就可以使用 yarn 去帮我们创建我们的项目了。但是在之前我们的介绍，我们应该知道，单有有 yarn 这个模块是不够的。因为 Yeoman 是搭配特定的 generator 才能去使用。要想去使用 Yeoman 去帮我们创建项目，必须要找到对应项目类型的generator。

例如我们要想去生成一个 node_module 的项目，也就是一个 node 的模块。我们可以使用generator-node 这样一个模块。使用这个 generator 的方式，也是先把它通过全局范围安装的方式安装到我们的本地。

使用 yarn global add generator-node 这个命令安装 generator。

image.png

有了这样两款模块安装到本地过后，我们就可以使用 yarn 去运行刚刚所安装的这个 generator -node 的 generator，也就是生成器自动的去帮我们创建一个全新的 node_module。

我们可以先定位到我们项目所在的目录。使用 mkdir 命令去创建一个新的文件夹 my-module，这个 my-module 就作为我们新创建的这个模块项目的一个根目录。

安装完成后，直接使用 yo node (使用时不需要加 generator )来运行 generator 文件，生成项目结构目录。

image.png

在这个过程当中，Yeoman 会提出一些问题，我们可以在命令行当中通过命令行交互的方式把它填写进去。具体要声明的信息如下：

  • 模块的名字，例如 my-module。
  • 它会告诉你这个模块其实在 npm 上已经存在了，是否要选择另外一个，同时生成器自动的去检查了这个包名是否可用，如果选在 Y，需要新建一个模块的名字，选择 N，直接选择当前模块名字，不再去选择别的名字。
  • 最后会让你再去输入一个 Description，也就是你项目的一个描述。例如 hello node module。
  • 然后再去填写一下项目的主页，例如：  wwww.github.com/itzmk/my-mo…。
  • 项目的作者的名字，例如 itbbfx
  • 作者的邮箱，itbbfx@qq.com
  • 主页，例如 www.itbbfx.cn。
  • 模块的一些关键词，例如：node，module。
  • 是否去发送你的这个代码覆盖率的报告到一个平台上。
  • 输入 node 版本，指的是当前这个模块支持 node 的哪个版本。如果不去输入，默认支持全部版本。
  • 设置 GitHub 用户名，例如 itzmk。
  • 项目的许可证，例如 MIT。

这些所有输入的信息都会影响到我们最终生成出来的这个项目的基础结构。当你所有的选项都输入完成过后，它会在当前这个目录下面去创建一些基础文件，并且帮我们在项目根目录下去运行npm install 去安装这个项目必要的一些依赖。

那我们可以看到这个项目的目目录结构，这里面默认的这些文件都是通过一样这款脚手架工具帮我们创建的。生成的目录结构如下：

image.png

此时此刻，其实我们应该也能感受到 Yeoman 的一个优势。

通过 VS Code 打开当前这样一个目录。在这个目录下面的这些文件，除了基本的文件帮我们创建之外，另外内部的一些基础代码，包括一些基础的配置，它都是提前帮我们配好的，这也是脚手架工具的一个优势。

目前为止，整个脚手架的工作流程就结束了，脚手架工的整个工作流程主要的目的就是让我们得到这样一个基础的项目结构以及一些基础的项目代码。

有时候我们并不需要去创建完整的项目结构，可能我们只是需要在已有的项目基础之上去创建一些特定类型的文件。

例如我们给一个已经存在的项目去创建 readme，又或是我们在一个原有的项目之上去添加某些类型的配置文件，比如 eslint 或者biu的配置文件。这些配置文件都有一些基础的代码，如果自己手动去写很容易配错。我们可以通过生成器自动帮我们去生成，这样会提高我们的开发效率。

如果你需要这样的一些需求，那你可以使用 Yeoman 所提供的 Sub Generator 这样一个特性来实现。

我们通过在项目的目录下去运行一个特定的 Sub Generator 命令去生成对应的文件，使用的命令是 yo node:cli。同时还提示我们是否需要重置 package.json 文件，需要重置，原因是因为我们在去添加 cli 支持的时候，会添加一些新的模块和配置，

image.png

创建成功之后，在 package.json 文件中自动添加如下配置信息，这写都是我们在 cli 应用当中所需要的。

"license": "MIT",
  "bin": "lib/cli.js",
  "dependencies": {
    "meow": "^3.7.0"
  }

除此之外，我们在 lib 目录下生产一个 cli 文件，同时这个 cli 里面提供了一些 处理 应用一个基础的代码结构。

#!/usr/bin/env node
'use strict';
const meow = require('meow');
const myModule = require('./');


const cli = meow(`
Usage
  $ my-module [input]


Options
  --foo  Lorem ipsum. [Default: false]


Examples
  $ my-module
  unicorns
  $ my-module rainbows
  unicorns & rainbows
`);

有了这些信息之后，我们就可以将这个模块作为一个全局的命令行模块去使用了。本地模块我们可以通过 yarn link 命名到全局范围。

image.png

设置全局范围过后，我们就可以通过模块的名字，运行所添加进来的模块。

小结

Yeoman 基本介绍。

我们在使用 Yeoman 的时候，我们先需要在全局范围去安装一个 yo 的一个工具。

安装这个yo 这个工具之后，我们还需要去安装特定类型的 generator。因为不同的 generator 就用来帮我们生成不同的项目。

在使用 yo node 命令启动生成器，在生成器运行过程当中会问你一些问题，通过你的输入完成之后，就可以得到一个你想要的项目结构。

avatar
文章
阅读
粉丝