yeoman可以帮助我们构建脚手架。它有3500+ 开源的脚手架可用。每一个脚手架都是一个npm package,我们可以引用已经发布的脚手架,也可以根据需要自定义一个。
1.引用已发布的脚手架
使用yeoman 首先我们需要全局安装 yo(mac 需要管理员身份安装)
sudo npm install -g yo
安装完后运行yo ,我们可以选择安装已有的脚手架,脚手架一般名为 generator-xyz;
比如我们安装了generator-webapp , 然后可以通过以下命令新建一个webapp 的文件夹,并进入该文件夹运行该脚手架,然后通过一系列的交互选择后会根据选择自动构建新项目。新项目构建后默认会自动安装依赖。
mkdir webapp && cd webapp
yo webapp
如果我们安装了某个脚手架,那么执行 yo, 在下面的列表中也会有这个脚手架,就可以直接运行该脚手架生成项目。
通过以下命令,我们可以访问脚手架首页。
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", 才能被我们的脚手架页面索引。
文件夹树
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),便可以看到脚手架在运行了。
到目前为止,我们的脚手架就建成并测试完成了。
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…