yeoman 初识及脚手架创建流程

293 阅读4分钟

yeoman可以帮助我们构建脚手架。它有3500+ 开源的脚手架可用。每一个脚手架都是一个npm package,我们可以引用已经发布的脚手架,也可以根据需要自定义一个。

1.引用已发布的脚手架

使用yeoman 首先我们需要全局安装 yo(mac 需要管理员身份安装)

sudo npm install -g yo

安装完后运行yo ,我们可以选择安装已有的脚手架,脚手架一般名为 generator-xyz;

0

0

比如我们安装了generator-webapp , 然后可以通过以下命令新建一个webapp 的文件夹,并进入该文件夹运行该脚手架,然后通过一系列的交互选择后会根据选择自动构建新项目。新项目构建后默认会自动安装依赖。

mkdir webapp && cd webapp
yo webapp 

如果我们安装了某个脚手架,那么执行 yo, 在下面的列表中也会有这个脚手架,就可以直接运行该脚手架生成项目。

0

通过以下命令,我们可以访问脚手架首页。

npm home generator-webapp

好了,学到这里是不是觉得很简单呢。但是如果已有的脚手架并不能满足我们的需求。那么我们怎么来自定义一个脚手架呢。

2.自定义脚手架

先建一个generator- 为前缀的文件夹,我们将在里面创建脚手架。自定义脚手架名字必须要以 generator- 为前缀。可以通过npm init 先生成package.json。然后安装yeoman-generator。

mkdir generator-create-custom & cd generator-create-custom
npm init
npm i yeoman-generator --save

keywords属性必须包含"yeoman-generator", 才能被我们的脚手架页面索引。

0

文件夹树

Yeoman 的功能依赖于您如何构建目录树。每个子脚手架都包含在其自己的文件夹中。

调用yo name 运行的是默认脚手架app。这必须包含在app/目录中。

调用yo name:router运行的是子脚手架router, router文件夹必须与app 文件夹同级。

yeoman 允许两种不同的目录结构。

第一种:

├───package.json
└───generators/
    ├───app/
    │   └───index.js
    └───router/
        └───index.js

第二种:

├───package.json
├───app/
│   └───index.js
└───router/
    └───index.js

第二种需要把package.json 中的file配置成脚手架文件夹。

index.js 是主要执行的文件,在里面我们可以扩展yeoman提供的基础脚手架 ,然后添加自己的方法,这些方法都是按顺序执行。

const Generator = require('yeoman-generator');
module.exports = class extends Generator {
  method1() {
    this.log('app nmethod 1');
  }
  method2() {
    this.log('app nmethod 2');
  }
};

当然脚手架不可能只是这么简单,它需要依赖许多插件,我们不可能自己去安装每个依赖。

yeoman为我们提供了创建脚手架的脚手架 generator-generator,他会自动生成一个脚手架框架,如下图的目录结构,然后我们再根据自己的需求进行修改。其中templates 文件夹里面是我们的项目模板。

npm install -g yo generator-generator
yo generator

运行脚手架

当我们建好脚手架后,要在本地检测它是否有效应该怎么做呢。由于是在本地,还不能作为全局的npm 模块用,我们可以使用 npm 创建全局模块并将其符号链接到本地​​模块。

在脚手架项目的根目录(在generator-name/文件夹中),键入:(mac 要用管理员身份执行)

sudo npm link
sudo npm unlink 脚手架名称 // 如果取消链接

这个时候再 yo create-artemis(以前:yo generator-create-artemis),便可以看到脚手架在运行了。

0

到目前为止,我们的脚手架就建成并测试完成了。

3.发布到npm仓库

先在www.npmjs.com 注册一个账号,然后设置镜像地址 

npm config set registry=http://registry.npmjs.org

检查自己的npm包如果和别人的包重名了,去package.json里修改,然后登录,发布包。

npm adduser // 登录npm
npm publish 

去npm仓库检查一下是否发布成功,然后全局安装 generator-create-custom。

npm install generator-create-custom -g

最后运行create-custom,根据提示就创建我们的项目了。

注:如果只是测试,可以撤销。

npm unpublish 脚手架包名 --force

看到这里相信你对创建脚手架的流程有个基本了解了,下一篇文章我们就来学习具体怎么来填充脚手架,让他能和我们交互,并根据我们的反馈创建我们需要的项目框架。

最后推荐下我的个人网站- 【良月清秋的前端日志】(animasling.github.io/front-end-b…

参考:github.com/yeoman/gene…