使用Yeoman定製前端腳手架

Jakeeee發表於2017-08-14
前端

首先附上Yeoman官網：yeoman.io/

我製作的前端腳手架：generator-jake-front

以及我在前端同學的分享會上的分享ppt：yeoman.key

如果想快速製作一個腳手架，並且不需要實現特別複雜的定製化，看完這篇文章足夠，如果想要實現複雜的功能，需要去檢視官方文件。

環境

需要安裝Nodejs

全域性安裝需要的工具

npm install -g yo
npm install -g generator-generator複製程式碼

初始化專案

執行下面命令，執行之前並不需要自己新建資料夾，yo generator會幫助我們建好資料夾

yo generator複製程式碼

專案名稱自己設定，必須是以generator-開頭，協議選擇MIT，在設定了一系列問題之後

自動生成如下目錄

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要在www.npmjs.com/沒被建立過，才可以釋出。

釋出需要一個npm的賬號，如果沒有使用npm adduser建立；

如果已有賬號，執行npm login登陸。

在專案根目錄下，執行npm publish就可以釋出了。如果更新後重新發布，注意修改根目錄下的package.json檔案中的版本號。

使用npm unpublish 包名命令可以撤銷釋出，只有在發包的24小時內才允許撤銷釋出的包。

相關文章