使用Yeoman定制前端脚手架

时间 2019-11-16

标签使用 yeoman 定制前端脚手架栏目 Google 繁體版

原文原文链接

首先附上Yeoman官网：http://yeoman.io/html

我制做的前端脚手架：generator-jake-front前端

以及我在前端同窗的分享会上的分享ppt：yeoman.keynode

若是想快速制做一个脚手架，而且不须要实现特别复杂的定制化，看完这篇文章足够，若是想要实现复杂的功能，须要去查看官方文档。git

环境

须要安装Nodejsgithub

全局安装须要的工具npm

npm install -g yo
npm install -g generator-generator

初始化项目

执行下面命令，执行以前并不须要本身新建文件夹，yo generator会帮助咱们建好文件夹json

yo generator

项目名称本身设置，必须是以generator-开头，协议选择MIT，在设置了一系列问题以后promise

自动生成以下目录app

generator-test
├── LICENSE
├── README.md
├── __tests__
│   └── app.js
├── generators
│   └── app
│       ├── index.js
│       └── templates
│           └── dummyfile.txt
└── package.json

配置

generators/app/templates/是默认存放文件的目录，把全部模版文件放在这个目录下异步

/generators/app/index.js是Yeoman的配置文件，定义如何生成咱们的脚手架

prompting

Prompts是generator与用户交互的主要方式。prompt模块由 Inquirer.js提供，你能够参考它的API，在可用的提示选项列表。

prompt方法是异步的而且返回一个 promise。在你运行下一个任务前去完成它，你须要返回 promise。

module.exports = class extends Generator {
  prompting() {
    // Have Yeoman greet the user.
    this.log(yosay(
      'Welcome to the awe-inspiring ' + chalk.red('generator-downloads') + ' generator!'
    ));

    const prompts = [{
      type: 'confirm',
      name: 'someAnswer',
      message: 'Would you like to enable this option?',
      default: true
    }];

    return this.prompt(prompts).then(props => {
      // To access props later use this.props.someAnswer;
      this.props = props;
    });
  }
};

作一些适当的修改，实现更通用的脚手架。能够查阅API

this.appname: 获取当前文件夹名称
this.user.git.name(): 获取全局git用户名
this.user.git.email(): 获取全局git邮箱
this.github.username(): 获取github用户名

定义对象中的type，管理交互方式。使用input实现控制台输入。

type: 'input',
name: 'author',
message: 'author',
default: this.user.git.name()

这样便实现了让用户输入做者名称，默认为git全局配置的用户名。而后在其余配置中使用this.props.author实现获取用户输入。

writing

Generators在this.fs暴露了全部的文件的方法，这是一个实例，mem-fs editor - 确保为全部可得到的方法选择模块文件。

值得注意的是，经过this.fs暴露commit，你不该该在你的generator去调用它。Yeoman在运行循环的冲突阶段结束后，在内部调用它。

复制一个模板文件

例如：./templates/index.html的文件内容是：

<html>
  <head>
    <title><%= title %></title>
  </head>
</html>

而后，咱们将使用copyTpl方法去复制做为模板的处理中的文件。copyTpl使用的是ejs 模板引擎。

module.exports = class extends Generator {
  writing() {
    this.fs.copy(
      this.templatePath('index.html'),
      this.destinationPath('index.html'),
      { title: 'Templating with Yeoman' }
    );
  }
};

一旦generator运行成功，index.html将会包含：

<html>
  <head>
    <title>Templating with Yeoman</title>
  </head>
</html>

json也一样适用上面的语法，配置package.json文件能够适应不一样的项目。

install

install方法设置在文件copy完成以后执行的命令，例如

module.exports = class extends Generator {
install() {
this.installDependencies({
      bower: true,
      npm: true,
      yarn: false,
      callback: function () {
       this.log('Everything is ready!');
      }
    });
  }
};

测试

因为咱们在本地开发，并不知道用起来怎么样，因此可使用npm link命令，至关于在全局安装了此脚手架，而后在新文件夹中执行yo，选择脚手架，即可以测试

发布

generator-test/package.json中的name要在https://www.npmjs.com/没被建立过，才能够发布。

发布须要一个npm的帐号，若是没有使用npm adduser建立；

若是已有帐号，运行npm login登录。

在项目根目录下，运行npm publish就能够发布了。若是更新后从新发布，注意修改根目录下的package.json文件中的版本号。

使用npm unpublish 包名命令能够撤销发布，只有在发包的24小时内才容许撤销发布的包。