威尼斯人线上娱乐

大前端的全自动化工厂,Yeoman量身定制前端脚手架

5 5月 , 2019  

威尼斯人线上娱乐 1

脚手架那个词推断做前端的都很熟知。在未曾得以达成前端工程化的年份,前端代码的集体都是纯手工业维护的。比方本身要做二个网址页面,那么笔者索要手动创建叁个文本夹来存放代码文件,笔者把它命名叫demo。然后在demo目录下开创src文件夹,在src文件夹内创造css文件夹、js文件夹、image文件夹、lib文件夹等等…壹切都是手工维护。自从node.js出现后,前端开采才逐步初步离别刀耕火种,愈来愈多的自动化工具充斥大家的眼珠子。模板生成、代码压缩、创设打包、自动安顿…那几个已经化为营造前端工程项目的标配。那么,3个模板生成的命令行工具的法则是怎么?怎样开采3个属于自个儿的一声令下行脚手架工具?希望本人写的那篇小小说会给大家带来一些启示。

威尼斯人线上娱乐 2

Yeoman是什么?

Yeoman为啥方圣洁,说她有三头六臂一点都不浮夸。

威尼斯人线上娱乐 3

因为他由三局地组成:yo(脚手架工具)、grunt(等塑造工具)、npm(等包管理器)。

合法文书档案中给他的定势为scaffolding
tool
,其实便是脚手架工具,可以协理前端开辟职员量身定制化本身的脚手架,省去copy环节。

使用 yeoman
generator
能够协理大家营造项目布局、安装依赖等重复性操作,但是已有的generator有时并不能够满意须要,所以能够应用yeoman的API来构建筑组织和的生成器。

因此定制好温馨的generator之后,只要求多少个指令,就能够使用自身的脚手架,并且自动化生成项目文件结构、配置文件、依赖包等。

接下去发轫敲黑板、划入眼了!!!

一.Yeoman是什么

Yeoman是今世化前端项目标脚手架工具,用于转移包罗钦点框架结构的工程化目录结构。它是全部前端自动化学工业厂的第一站。

从个人使用者的角度来看,Yeoman的身份某些鸡肋,因为流行框架自带的cli工具都能够自动生成官方推荐的目录结构,而且2个项目持续少则几个月多则几年,而项目标伊始化结构目录在此期间只需求生成三次。尽管工具的准备定位如此,但在组件化开采的洋气中,使用Yeoman来变化符合项目编码标准的零件框架是不行有要求的。

为了降低项目标掩护资金,将须要的组件结构和必备的运用表明变化组件模板,使用Yeoman工具来一贯生成,当项目标体量更大时,你就能体会到这种办法的益处。

原理

转变模板文件的主意能够是地点新建空白文件,然后开展文件内容读写;又恐怕是把本地已有的模板实行陈设音信填写。可是大家领会,IO读写的速度非常的慢,质量消耗大。不过一个模板生成器(Generator)假如是基于已有的模板文件举行铺排填充,然后在copy到项目目录对应的位置,那会比一贯读写磁盘成效越来越高。所以一般的话,模板生成器会选取第二种专门的学问原理。

Yeoman 是一种高效、开源的 Web
应用脚手架搭建系统,意在简短开辟进程。Yeoman
因其专注于提供脚手架成效而声誉鹊起,它帮忙选用各类分裂的工具和接口协同优化项目的浮动。

布置开拓条件

亟待设置node.js

安装Yeoman的命令行工具和开发Yeoman生成器的工具
generator-generator

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

2.Yeoman的貌似选用办法

大前端的全自动化工厂,Yeoman量身定制前端脚手架。实际情况请参考【Yeoman官方网站】

一.采纳包管理工具安装yo

  • 使用npm:npm install -g yo

  • 使用yarn:yarn global add yo

    设置后在命令行输入yo --version,呈现版本号则设置成功。

二.下载项目目录模板generator-XXX

开源社区有异常多的品类目录模板,在命令行输入npm install generator-fountain-webappyarn add generator-fountain-webapp安装项目模板。Fountain能够定制安装各个集成的javascript框架和CSS框架。

三.用钦点模板开头化项目目录

在脚下文件夹开启命令行,输入yo XXX(XXX为generator模板后缀的称呼,比方yo fountain-webapp),遵照交互式命令行新闻填写参数,最终就能够生成项目目录。

[运用fountain-webapp模板暗暗提示图]
威尼斯人线上娱乐 4

4. 子模板的行使

一旦模板援助子模板作用,用户通过yo XXX:YYY就能够生成项目组件,比方yo angular : controller浮动四个angularjs品类中央调整制器的代码骨架)。

Yeoman-generator

模板生成器的脚手架有广大,前端领域天天都会有无数接近的车轮接踵而至 一拥而上地从开源社区流出。这里小编用来开荒自个儿的generator的工具是Yeoman。Yeoman的图标是八个戴着红帽子的大胡子,它是一个通用的脚手架搭建系统,能够创立任何的项目标app。同时它又是”语言无感知”的,扶助创建任何类型开拓语言的花色,Web,
Java, Python, C#
等等。Yeoman的通用性在于,它自身不做别的决定,全部的操作都以经过Yeoman情状里面包车型客车种种generator完毕的。通过自定义generator,大家能够创制任何格式的类别目录。那是Yeoman的最大吸重力之处。其它,Yeoman通过提供promting那些方法达成输入式命令行交互,能够让用户私自填写配置消息,交互体验也异常的厉害。上面说说哪些基于Yeoman开辟三个粗略的generator:

本文要点

起先化项目

yo generator 

试行上述命令,施行前,无需新建文件夹,yo
generator会帮大家建好文件夹。Yeoman会在终极建议多少个难点,那是三个交互式的布局进度。项目名友好安装,必须以generator-伊始,协议选取MIT,协议完结后,Yeoman会自动安装项目注重。当然能够告壹段落掉自动安装,本身行使cnpm恐怕yarn举行设置,用了都说好。

威尼斯人线上娱乐 5

yeoman.png

说起底生成的品种目录:

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

三.创设友好的脚手架

您的集体很可能有和好包裹的框架,无法使用现存的generator,同时yo的速度不是很牢固(据书上说是因为内置的generator找出机制和墙的案由),庆幸地是其官方组织开源了yeoman代码,并有详实的文书档案解释其运营规律和编写制定,让开荒者能够依照集团须求定制合适的generator生成器。

Simple-dir

simple-dir是自身要好捣鼓的贰个很粗略的Yeoman-generator,在这里小编拿它来作为解说示例,我们也能够张开详见代码来看,应接star,也应接提issue。

Yeoman 提供了1种灵活创立、开拓、编写翻译和调节和测试 Web
应用的脚手架(scaffolding)软件。

配置

/generators/app/index.js
是Yeoman的安顿文件,生成器入口文件,在此处开始展览大家温馨脚手架的安顿

generators/app/templates/是暗许存放文件的目录,全部模板文件都位居那些目录下,最生平成的脚手架也唯有这几个文件夹下的开始和结果。

3.一 使用办法

你能够通过如下格局使用它:

  1. 透过在融洽的体系中援引yeoman-generator,使用yeomanAPI编辑定制的模版文件(注意利用此种方法时,要是期望通过yo来调用生成器,则必要按钦点的形式编写package.json文件)。
  2. 下载generator-generator模板并选用yo generator在当前目录生成模板文件骨架,并完美其生命周期方法。

第一步,package.json

支付贰个Yeoman-generator,大家要做的首先步正是布局package.json。有多少个第3的地点,二个是,name的值的格式必须是”generator-“前缀
+
Yeoman-generators官方源列表上的不二法门值(假若你要共享你的generator到法定generator源的话);第贰个便是,keywords属性必须归纳”yeoman-generator”这一个值;第一,files属性是命令自定义文件,app是暗许的下令;第五,要求求设置新型版本的yeoman-generator依赖,能够直接运营:npm
install –save yeoman-generator
获取最新的版本号。详细的package.json能够看上面那份:

{
  "name": "generator-simple-dir",
  "version": "0.0.1",
  "description": "A very simple template generator",
  "files": [
    "generators/app",
    "generators/comp",
    "generators/page"
  ],
  "author": "橙乡果汁",
  "license": "MIT",
  "keywords": [
    "yeoman-generator"
  ],
  "repository": {
    "type": "git",
    "url": "git@github.com:hugzh/generator-simple-dir.git"
  },
  "bugs": {
    "url": "https://github.com/hugzh/generator-simple-dir/issues"
  },
  "dependencies": {
    "glob": "^7.1.0",
    "mkdirp": "^0.5.1",
    "yeoman-generator": "^0.24.1"
  }
}

相应的src目录格式应该是如此的:

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

你也得以一直把files属性间接写成:

"files": [
  "app",
  "comp",
  "page"
]

而是那样的话,你的代码根目录就必须平昔包涵app,comp和page文件夹。

尽管如此 Yeoman 本人是 JavaScript 编写的,但适用于任何语言编写的应用。

prompting 接受用户输入阶段

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;
    });
  }
};

装进了
inquirer,在极端提供二个交互式的安顿进度。能够依靠提供的API,实行适度的改造,落成通用的脚手架。

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

      const prompts = [{
          type: 'confirm',
          name: 'someAnswer',
          message: 'Would you like to enable this option?',
          default: true
      },{
          type: 'input',
          name: 'name',
          message: 'Your project name',
          default: this.appname
      },{
          type: 'input',
          name: 'description',
          message: 'description',
      },{
          type: 'input',
          name: 'author',
          message: 'author',
          default: this.user.git.name()
      },{
          type: 'input',
          name: 'email',
          message: 'email',
          default: this.user.git.email()
      }];

此间落成了让用户输入作者、项目名、email。

叁.二 generator的生命周期

generator的真面目是1个后续自yeoman-generator的佚名类,其代码架构如下:

const Generator = require('yeoman-generator');
module.exports = class extends Generator{
    initianlizing(){
        //获取当前项目状态,获取基本配置参数等
    }
    prompting(){
        //向用户展示交互式问题收集关键参数
    }
    configuring(){
        //保存配置相关信息且生成配置文件(名称多为'.'开头的配置文件,例如.editorconfig)
    }
    default(){
        //未匹配任何生命周期方法的非私有方法均在此环节*自动*执行
    }
    writing(){
        //依据模板进行新项目结构的写操作
    }
    conflicts(){
        //处理冲突(内部调用,一般不用处理)
    }
    install(){
        //使用指定的包管理工具进行依赖安装(支持npm,bower,yarn)
    }
    end(){
        //结束动作,例如清屏,输出结束信息,say GoodBye等等
    }
}

Yeoman-generator提供了大多包裹好的措施,文书档案详细且源码注释万分详尽,详细的情况可参见【Yeoman-generator官方API】

第二步,拓展generator

那边大家有多个generator——app,comp和page。以page为例,我们来贯彻几个generator。

首先,须要承袭Yeoman提供的generator基类:

var generators = require('yeoman-generator');
module.exports = generators.Base.extend();

然后大家就足以在基类内部重写generator的艺术了。Yeoman提供了一文山会海的基类方法:

initializing – 起初化 (检查当前项目景况、获取配置文件内容等等)
prompting – 获取用户输入,达成与用户的互相 (通过this.prompt()调用)
configuring – 保存配置并铺排一体项目 (比如创建 .editorconfig
文件和其余媒介文件)
default – 当定义的法子未有匹配任何基类方法的时候用到
writing – 根据自定义的规则写入具体的generator文件 (routes,
controllers, etc)
conflicts – 内部争辩管理
install – 安装npm、bower等正视的地点
end – 在最后调用, 完成cleanup, say good bye等作用。

在示例generator-simple-dir里,page那几个generator的功效是创办页面,须要生成html/css/js文件。在generators.Base.extend函数内部,page落成了
initializing、prompting、writing、end那多少个格局。对于prompting那样的异步方法,必要在相互结束的时候调用this.async()来终止异步职务。Yeoman达成用户交互的主干措施是prompting,它是三个异步的点子,并且重返四个promise。prompting方法通过2个数组参数,能够落成链式的用户输入。当中input类型的是用户输入自定义内容,confirm类型是当做True/False判定的prompt,输入Y/N。官方的演示如下:

module.exports = generators.Base.extend({
  prompting: function () {
    return this.prompt([{
      type    : 'input',
      name    : 'name',
      message : 'Your project name',
      default : this.appname // Default to current folder name
    }, {
      type    : 'confirm',
      name    : 'cool',
      message : 'Would you like to enable the Cool feature?'
    }]).then(function (answers) {
      this.log('app name', answers.name);
      this.log('cool feature', answers.cool);
    }.bind(this));
  }
})

假设你想要记住用户输入的二个内容,用来做后边输入的暗中认可值的话,还足以透过增添store:true配置来促成。
在generator-simple-dir里面,page这几个generator包罗5个实践步骤:初始化、获取用户输入、依照用户输入生产模板文件、停止再次回到,落成的代码如下:

'use strict';
var generators = require('yeoman-generator');
var glob = require('glob');

module.exports = generators.Base.extend({
  // init
  initializing: function() {
    this.existedFile = [];
    this.pageName = '';
    // 遍历./pages
    var pageFiles = glob.sync(this.destinationPath('./pages/*/'));
    var reg = /\/(\w+)(\/$)/;
    pageFiles.forEach(function(v) {
      if (v && v.lastIndexOf('/') > -1) {
        this.existedFile.push(reg.exec(v)[1]);
      }
    }.bind(this));
  },

  prompting: function() {
    var done = this.async();
    var promptConf = [{
      type: 'input',
      name: 'pageName',
      message: '请输入页面名称:',
      default: 'page_demo',
      // 校验page是否已存在
      validate: function(input) {
        if (this.existedFile && this.existedFile.indexOf(input) >
          -1) {
          this.log('页面已存在,请换一个页面名称!');
          return false;
        } else {
          return true;
        }
      }.bind(this)
    }, {
      type: 'input',
      name: 'pageTitle',
      message: '页面Title描述:',
      default: 'Title'
    }, {
      type: 'confirm',
      name: 'isNeedStyle',
      message: '是否需要样式表?',
      default: true
    }, {
      type: 'confirm',
      name: 'isPc',
      message: '是否PC端的页面?',
      default: false
    }];

    return this.prompt(promptConf)
      .then(function(props) {
        this.pageName = props.pageName;
        this.pageTitle = props.pageTitle;
        this.isNeedStyle = props.isNeedStyle;
        this.isPc = props.isPc;

        done();
      }.bind(this));
  },
  writing: function() {
    var tplArr = ['page.html', 'page.js', 'page.css'];
    var pageConf = {
      pageName: this.pageName,
      pageTitle: this.pageTitle,
      isNeedStyle: this.isNeedStyle,
    };
    if (this.isPc) {
      tplArr[0] = 'page.pc.html';
    }
    if (!this.isNeedStyle) {
      tplArr.pop();
    }

    tplArr.forEach(function(value, index) {
      // (from,to,content)
      this.fs.copyTpl(
        this.templatePath(value),
        this.destinationPath('pages/' + pageConf.pageName + '/' + pageConf.pageName +
          '.' + value.split(
            '.').pop()),
        pageConf
      );
    }.bind(this));

  },
  end: function() {
    this.log('新建页面完成!')
  }
});

Yeoman 帮助与 Webpack、Babel、TypeScript、React 和 Angular
等多样第2方软件库的无缝集成。

writing 生成项目目录结构阶段

经过this.fs,能够应用具备文件的艺术,只用使用mem-fs
editor模块的接口

writing() {
      this.fs.copy(
          this.templatePath('build/'),
          this.destinationPath('build/')
      );

      this.fs.copy(
          this.templatePath('config/'),
          this.destinationPath('config/')
      );

      this.fs.copy(
          this.templatePath('src/'),
          this.destinationPath('src/')
      );

      this.fs.copy(
          this.templatePath('mock/'),
          this.destinationPath('mock/')
      );

      this.fs.copy(
          this.templatePath('static/.gitkeep'),
          this.destinationPath('static/.gitkeep')
      );

      this.fs.copy(
          this.templatePath('.babelrc'),
          this.destinationPath('.babelrc')
      );

      this.fs.copy(
          this.templatePath('.eslintrc.js'),
          this.destinationPath('.eslintrc.js')
      );

      this.fs.copyTpl(
          this.templatePath('package.json'),
          this.destinationPath('package.json'), {
              title: this.props.name,
              description: this.props.description,
              author: this.props.author,
              email: this.props.email
          }
      );

      this.fs.copy(
          this.templatePath('README.md'),
          this.destinationPath('README.md')
      );

      this.fs.copy(
          this.templatePath('.gitignore'),
          this.destinationPath('.gitignore')
      );

      this.fs.copyTpl(
          this.templatePath('index.html'),
          this.destinationPath('index.html'),
          { title: this.props.name }
      );
  }

3.3 generator的调用

地方开拓的generator-XXX未经过发表,要求在package.json到处目录开启命令行,输入npm link将其设置到地头的全局景况,然后通过yo XXXyo XXX:YYY的不二秘籍来调用,也得以因此第6节中聊起的工具链集成的方法绕开yo指令实施生成器。

定制模板

prompting方法是用来收获用户输入,writing方法是基于用户输入内容更改模板文件。从前聊起,模板生成器的一般原理是用赢得的安插音讯渲染好模板,再拷贝到项目目录对应的地方。所以,在writing方法里面,要求落成模板渲染和拷贝。在Yeoman-generator里,供给的沙盘文件暗中同意放在templates文件夹里,全部文件有关的操作通过this.fs对象来达成。this.fs.copyTpl就是我们用来拷贝渲染好的模板文件的方法,供给输入多个参数:模板源路线、必要拷贝到的门类路径、模板渲染内容对象。模板的渲染是基于ejs模板引擎的语法。依照大家定义的花色组织,page的贯彻如下:

this.fs.copyTpl(
  this.templatePath(value),
  this.destinationPath('pages/' + pageConf.pageName + '/' + pageConf.pageName +
    '.' + value.split(
      '.').pop()),
  pageConf
);

更详尽的Yeoman-generator文件操作文档请点击这里。

Yeoman 内创立有叁个依据 Node.js 的 HTTP
开采服务器,简化了开支条件的安装和开垦进程的迭代。

copy() vs copyTpl()

他俩的率先个参数都是模板文件路线,第一个参数是生成文书路径,差别之处在于copyTpl的第六个参数是2个对象,用于向模板中填充数据。copyTpl使用的是ejs模板引擎。

比如说:./templates/index.html的文件内容是:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

this.fs.copyTpl(
    this.templatePath('index.html'),
    this.destinationPath('index.html'),
    {title: 'Templating with Yeoman'}
);

壹但generator运行成功,index.html将会编写翻译为:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Templating with Yeoman</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

json也刚愎自用适用上边的语法,配置package.json文件能够适应差异的项目。

四. Yeoman与工具链集成

与前者工程化学工业具链的合一只怕是Yeoman最相宜的归宿,为此Yeoman社中国共产主义青年团干部脆开源开到底,直接当面了其大旨库yeoman-enviroment,使得generator模板能够不必要经过yo工具就足以被调用,引用的方式相比轻松:

var yeoman = require('yeoman-environment');
var env = yeoman.createEnv();

//generator-XXX模块地址查询
var generatorPath = require.resolve('generator-XXX','XXX:app');

//如果generator未使用npm link进行连接,需要将其拷贝至工程依赖中按如下方式获取地址
var generatorPath = path.resolve(process.cwd(),'node_modules','generator-XXX','generators','app');

//注册generator
env.register(generatorPath, 'XXX:app');

//调用generator生成项目骨架或组件骨架
env.run('XXX:app', {'skip-install': true}, function (err) {
    console.log('done');
});

commander

地点大家解说了Yeoman-generator的定制,也显示了1个总结的generator——”simple-dir”。为了把simple-dir很优雅地跑起来,大家必要搞1个命令行工具。基于Nodejs开垦本人的命令行工具是极粗略的业务,因为TJ大神已经为大家贡献了屌炸天的工具——commander.js。关于commander的运用教程有过多,也正如便于上手,纵然你还尚无询问过commander.js,推荐阅读那两篇小说:《Commander:node.js命令行接口的一心缓慢解决方案》和《Commander写本人的Nodejs命令》。

有了commander的功底之后,我们将Yeoman-generator封装到自定义好的授命中。比如笔者曾经封装好了本身的命令行工具,它的名字称为atdir(取自auto
director),大家想要完结只须要周转 “atdir page” 就能自动生成供给的
html/css/js。然后我们只供给在atdir里面定义page.js:

module.exports = function() {
  var yeoman = require('yeoman-environment');
  var env = yeoman.createEnv();
  env.lookup(function() {
    env.run('simple-dir:page', {
      'skip-install': true
    }, function(err) {
      if (err) {
        throw err;
      }
    });
  });
}

env.lookup()的功力是遍历用户机器上安装好的generator,接入到Yeoman-environment,比方大家simple-dir的init、page或许comp命令。然后运转env.run()。由于自己已经将simple-dir发表到npm包了,所以能够一向调用env.run(‘simple-dir:page’,function(){})。若是你不想将generator发表到npm,然后又想在本土利用generator的话也得以,直接进入generator的根目录,推行npm
link,simple-dir 指令就能提到到本地的npm里面,Yeoman就会找到
“simple-dir:page” 那么些命令啦!

Yeoman 落到实处打造进度由开荒条件到优化后生育遇到间的无缝转移。

install 安装正视

// 3. 安装依赖
install: function (){
    this.npmInstall();
}

伍. 实战:tiny-helper工具开辟示范

在此演示怎么样创造多个小工具来扭转标准化的Component,示例工具使用generator-generator变化,为便利学习运用,放置在本地node_modules目录中,示例generator中只实行了两项基本操作:

  1. configuring阶段将.editorconfig文本一向拷贝至当前目录

  2. writing阶段将controller.tpl.js模板中的占位符替换为用户输入的要害词,然后生成新的controller.js文件

generator中第一示例代码:

//保存配置相关信息且生成配置文件(名称多为'.'开头的配置文件,例如.editorconfig)
configuring(){
    //生成.editorconfig
    this.fs.copy(
      this.templatePath('.editorconfig'),
      this.destinationPath('.editorconfig')
    );
}

//依据模板进行新项目结构的写操作
writing(){
    //替换关键字生成Controller.js
    var controllerTpl = this.fs.read(this.templatePath('controller.tpl.js'));
    this.fs.write(this.destinationPath('controller/'+ this.props.keyWords + 'Controller.js'),controllerTpl.replace(/__PLACEHOLDER__TINY__/g, this.props.keyWords));
}

在命令行输入npm run tiny运行:

[使用tiny-helper小工具]威尼斯人线上娱乐 6

controller.tpl.js模板:

[改动前的模版]威尼斯人线上娱乐 7

转移后的loginPageController.js:

[更动后的js文件]威尼斯人线上娱乐 8

可以看来我们早就应用首要词替换掉占位符并获得了新的controller.js框架文件。除了演示的功能外,yeoman置于援助ejs模板引擎,大家能够利用它生成种种html模板,包括广大样式的通用写法,富含固定类名的组件DOM结构等等,那对于联合团队代码风格独具显要的含义。

作者认为全体来说,Yeoman用作脚手架工具的存在意义,远没有对于提拔代码标准性的价值。

小工具——atdir

atdir正是地方说的命令行小工具,想要精通命令行的事无巨细封装方法能够戳这里。由于atdir未有颁发到npm源,不能够直接npm
i。如若想要运转起来的话,请先把atdir源码clone到地方,进入到atdir根目录,施行npm
link,npm install 之后就足以春风得意的实施atdir命令啦~~~
沾满几张周转分界面截图:
$ atdir init

威尼斯人线上娱乐 9

atdir init

威尼斯人线上娱乐,$ atdir page

威尼斯人线上娱乐 10

atdir page

$ atdir comp

威尼斯人线上娱乐 11

atdir comp

Yeoman最初揭橥于 2013 年,它是1款火速、开源的 Web
应用脚手架(scaffolding)软件,意在从简软件的费用进度。脚手架软件用于得以完毕项目中各个区别的工具和接口的三头应用,优化品种的改造进程。Yeoman
因其专注于提供脚手架功效而声誉鹊起,项目开源发表在GitHub上。

安装测试

如果你想观望本身布置的结果,能够选用npm link
命令,相当于大局安装了此脚手架,然后经过新建文件夹,且进入文件夹,运行yo,选择刚刚的脚手架,便得以测试。
例如:

mkdir vue-test && cd vue-test

结语

那只是Yeoman-generator的粗略用法,意图在于读书搭建两个投机的下令行脚手架,其实还有为数不少得以圆满的地点,比方如今的模板目录是定点的,能够牵挂完成越来越灵敏的布局;还是能增加webpack等包裹工具的config完结机关营造等等,这几个就留到前面再去开始展览。我们有什么主张也得以在github上提issue,应接指正!

初稿出自:果茶的随笔

威尼斯人线上娱乐 12

发布generator

能够将您创设的生成器发表到npm社区,便于自己和其他开辟者使用。

generator-test/package.json中的name要在https://www.npmjs.com/没被创立过,才足以揭穿。

借使未有npm的账号,能够经过npm adduser创设;
设若已有账号,通过 npm login 登入。

登录成功之后,在档期的顺序的根目录下,运维npm
publish就能够发布了。借使更新后再也公布,要求修改package.json文件的版本号。

运用下述命令能够打消宣布,只有在发表包2四钟头内允许撤废发布的包。

npm unpublish 包名

Yeoman 的基础知识

参考资料

Yeoman官网:http://yeoman.io/

威尼斯人线上娱乐 13

yeoman.jpg

Yeoman
的使用体验可分为四个档期的顺序,各层间无缝合营,均为单身开采,并可独立运转。在首先层上,Yeoman
提供了指令行实用表单程序“Yo”。Yo 与 Yeoman 一起利用,提供 Yeoman
软件平台的基线。在其次层中,Yeoman
包括了使用营造器“Grunt”和“居尔p”,帮忙达成利用开荒的自动化。Yeoman
软件第3层的天性在于应用了软件包管理器“npm”,管理后端和前端开荒的代码包及其正视关系,由此为利用开垦提供便宜。Yeoman
为开拓人士提供了三种整合开拓进度选拔的表征。

Yo

Yo 担负着“胶水”的成效,将动用粘合在联合签名的。Yo 可在 macOS、Windows 和
Linux 等三种差别操作系统上使用。从企图上看,Yo 通过 Gruntfile
与开荒人士接纳的生成器 (generator)协同工作,创立 Web
应用的基线。通过动用 Yo,可理解 Yeoman 的劳作体制。

对比 Grunt 与 Gulp

Grunt 提供了付出的自动化,因而变成 Yeoman 的要害创新组成都部队分。Grunt 和
居尔p 插件的装置和管制,均通过 Node.js 的软件包管理器
npm。作为1种义务局转器,Grunt 最大限度上简化了开垦人士的专业。Grunt
构建系统可用于项目标构建、预览和测试。一些重复性职务,包蕴编写翻译、缩减(
minification)、检测等,均可交由 Grunt 施行。Grunt
将支付协会从利用开采的琐碎职业(nitty
gritty)中解放出来,那表示开采职员能够小心于选拔所独有的某个关键、复杂之处。尤其是,Grunt
能够实施编写翻译、代码检查、单元测试和压缩等宗旨任务,简化了开拓人士的行事。一些名扬四海集团,包涵沃尔玛(沃尔玛(Walmart))和
Wordpress等,均已使用了 Grunt。

Grunt
还协助选用插件定制应用,其负有巨大的可用插件,支持执行三种任务。比如,开垦人士可利用
cc-templates-generator 插件基于组件生成模板,在须要并发运维 Grunt
职责时行使一些产出插件。但有须要提出,假如现成的插件并无法满足开拓人士的要求,那么她们得以经过grunt-init在
Grunt
上开创自个儿的插件,然后发表到数据库中以供客人使用。所创建的内容和文书,取决于开拓人士采取的具人体模型板。

居尔p 极度周边于
Grunt,也是一种开采职员创设利用的机动职责运行器。从安排性上看,Gulp
辅助使用各个插件完毕每一种职责,而 Grunt
则是选用可同时做到各类职责的插件。别的,居尔p
的习性也要断定地快。举例,Grunt 执行1回 Sass 编写翻译的用时 二.34八 秒,而
居尔p 仅必要 1.二7 秒。居尔p 的品质优势在于它选用了 Node 流,那意味 居尔p
没有要求在磁盘上写入中间文件。

支出团队在 Grunt 或 居尔p 两者间做出取舍时,应思虑的是接纳的切实可行须求。

npm

npm
是一种软件包管理器,提供本性组和包装的代码,协助开荒人士简化和自定义应用。平日,可用的代码是因此由
npm“托管”的代码库提供,个中包含 jQuery,React 和 Angular
等。从利用框架结构的角度看,开荒职员可利用 npm 采纳应用开荒所需的代码。npm
的另2个特色类似于 Grunt,倘诺 npm
平台提供的代码或软件包不可能满意开辟职员的必要,那么他们得以创建自身的软件包,并与客人共享。该做法适用于拥有的开源软件。

Yeoman 的优点

Yeoman 的流程中整合了种种菜鸟脾气,帮助新入门的开垦人士轻便举办 Web
应用开采,同时也简化了业夫职员的行事。

Yeoman 可用于开拓任何类型的 Web
应用。对于地下的开采人士来说,它提供了变得庞大的自由度。

该软件卓殊人性化。即便是不行贫乏经验的开垦人士也足以选取,由此也改为 Web
应用开垦的1种绝佳选拔。

该软件还提供了一些创设利用的自动化流程。对于无论具备什么种经验水平的每一项开采职员来讲,精简复杂的支付进度无疑都以一件好事。

在提供脚手架效能外,Yeoman 还为 Web
应用开荒的其余一些提供了工具。比如,调试所用的代码。开辟人士能够动用
Chrome Devtools,只怕别的驱动顺手的 IDE。Yeoman
生成器还提供调节和测试情势,可记录相关日志。这表示 Yeoman
能够满足开采职员的各个必要,不必采用巨量的软件平台就可以创立完美的利用。

Yeoman 帮忙选取任何编程语言制造应用,蕴涵 Java 和
C#。对于盼望或必要贯彻利用开垦三种化的开荒职员,该多语言软件提供的多成效性是老大实惠的。

Yeoman 集成了种种生成器。那个生成器作为 Yeoman 开荒进度的“插件”,为
Yeoman
用户提供了两种选拔。在搭建脚手架中,支持采纳分裂的生成器。举例,开荒人士可通过运用各样生成器间的协和理同盟来“支撑”自己的花色。在品种定制和开采以前,开荒职员还足以思考将生成器作为项目标准系统。一些热门的生成器蕴含:

Backbone.js:提供 Web 应用管理数据、视图、事件、REST API
等的构造和公共基础。

AngularJS:广为使用且12分盛行的 JavaScript
框架,可提供模型支撑、视图路由等职能。该生成器中还包涵了
sun-generator,落成调控器、指令、服务、提供者,装饰器(decorator)等其余职能。

Bootstrap 生成器:一种流行的 CSS
框架,通过提供超高效达成简化项目开销。它为 Bootstrap
项目提供八种初阶选项:CSS、LESS、SASS 和
Stylus。生成器依照开垦人士的选拔,将所选框架下载到项目的 bower 组件中。

JHipster 生成器:用于支付和安插 Spring Boot 和 Angular/React Web 应用。

Hyperledger-composer:使用 Hyperledger Composer
业务互连网定义作为输入,创立和编辑新应用程序相关的工件。

Yeoman 是开源的。
那意味着用户可从软件开垦的随机商店中受益。一旦须要汇聚英才制造最棒、最优化的系统,用户就可以收益于这几个最特出的开采职员。

Yeoman 的不足之处

Yeoman
援助接纳别的编制程序语言并为业余开拓者提供劳动,那意味对于那几个经验丰裕的开荒职员来讲,他们希望的是在提供高档开拓选项的同时尽量地简化和定制流程,由此Yeoman 大概毫无最棒的系统。在他们看来,Yeoman 的平台可能过于通用。

与上某个连锁,一些开荒职员恐怕会意识,由于 Yeoman
的生成器设置,他们开销了过多时间在定制和测试生成器上,而不是做事于实际的应用开辟。

Yeoman
另1个碰着斟酌之处是内需开采人员紧跟发展。对于开荒人士来说,首要的是保障他们不停有所最新的先后、生成器及其余工具,以生育最佳的制品。因而,项目或选拔是永远不会真正形成的,最棒施行也是时时到处转换的。为了维持竞争力,开采人士必须优孟衣冠。

Yeoman 具备不可磨灭的
API,那对于那二个刚开端或想要尝试创设利用的用户是1个很好的特征。
别的,Yeoman 还可机关推行一些大规模的天职,有助于开拓职员创新职业流程。

即便 Yeoman
尚存在一些弱点,但其幕后有着一个穿梭巩固的社区,并且开采人士也正值其行事流程集成
Yeoman,实现持续集成、版本调节等,从而使塑造利用对各位开拓人士来讲不再那么令人生畏和耗费时间。Yeoman
还援救多种选拔,比如 Grunt、居尔p 和
npm,确定保证开辟职员所全数的软件组合最符合组织对 Web
应用程序开荒进度的期望。

为越来越询问 Yeoman 的连带音信,上面大家将因而付出多个怎么采纳 Yeoman
创设示范应用,介绍构建的进度。该特定示例是 TodoMVC
的3个兑现。第二步:设置开荒意况

开采人士首要通过命令行与 Yeoman 举办交互。

在安装 Fountain Webapp Generator 以前,确定保障系统中装置了下列条件:

Node.js 陆 或上述版本;

npm 三 或上述版本;

Git;

Yeoman 工具集。

倘诺出现访问许可或权限难点,可参看操作指南。第3步:安装 Yeoman 生成器

安装用于 FountainJS
项目的生成器,可减掉用于安装标准文件(boilerplate)代码和文件夹结构的时辰。使用
npm 安装 generator-fountain-webapp,命令为 npm install –global
generator-fountain-webapp。

除此以外,还可利用 Yeoman 的交互菜单寻找其余生成器。运转 yo
命令,采取“install a
generator”选项,然后继续查找别的已发布的生成器。第1步:使用生成器搭建应用的脚手架

该手续体现 Yeoman
怎样转移开采职员选定的软件库和框架。别的,还有选项协助使用一些表面软件库,比如Webpack、Babel和Sass。

率先,创造项目文件夹。运维命令 mkdir mytodo 和 cd mytodo,为项目创立mytodo 文件夹。生成器将选用此文件夹放置生成的连串脚手架文件。

最近,运营 yo,并通过 Yeoman
菜单访问生成器。开辟职员大概已设置了三个生成器,对于此例需选定Fountain
Webapp并点击回车键。

一些生成器提供了附加的效果,使用开采职员软件库定制应用。初始布置生成器,加快开采条件的安装。

下边列出使用的壹部分 FountainJS 生成器选项:

模块管理,举个例子Webpack、SystemJS;

框架,例如React、Angular2或Angular1;

CSS 预管理器,举例SASS、LESS;

JavaScript 预管理器,举例贝布el、TypeScript;

八个示范应用,即指导页(a landing page)、示例程序 hello world 和
TodoMVC。

对此本例,箭头选用SaSS、React、Babel、Webpack和Redux
TodoMVC并回车。Yeoman
会自动为运用建构脚手架,并保管注重关系。第肆步:检查 Yeoman
生成的行使目录结构

查看 mytodo 目录中脚手架生成的剧情。在这之中可看出:

src

app

index.html

index.js

conf

gulp_tasks

gulpfile.js

.babelrc

package.json

node_modules

.gitattributes

.gitignore

在具备改动和安装落成后,会开始化3个新的 git 代码库。使用 git add –all
和 git commit -m ‘First
commit’命令增多第二个提交,保存当前情景。第四步:在浏览器中预览应用

启动 npm 脚本,创立一个依据 Node 的本地 HTTP 服务器,命令为 npm run
serve。该服务器就要 localhost:3000 端口(在1部分配备下是
127.0.0.一:三千)提供服务。以 localhost:3000 展开一个新的浏览器页面。

(注意:要结束服务器运转并退出 CLI 进度,使用 Ctrl+C 键盘命令。)

展开常用的文本编辑器查看文件,并可做出改换。在历次保存编辑后,浏览器将挟持自动刷新,该成效称为“现场重载”(live
reloading)。要达成该意义,必要在 gulpfile.js 中布置 居尔p 职务,在
gulp_tasks/browsersync.js 中配置Browsersync。第六步:使用 Karma 和
Jasmine 测试

Karma是壹种测试框架不可见性的 JavaScript
测试运维器。Jasmine测试框架已经包蕴在本例中所使用的 FountainJS
生成器中。前面运维的 yo fountain-webapp,在 mytodo 目录中生成了方式为
*.spec.js 的脚手架文件,并成立了 conf/karma.conf/js 文件。那为 Karma
提供了 Node 模块。

归来命令行,使用 Ctrl+C 杀掉本地服务器。使用 package.json 中的脚手架 npm
脚本运转单元测试。运营 npm test 初始化测试。

在 src 目录中打开src/app/reducers/todos.spec.js,可观望脚手架的单元测试。第七步:希图用来生产条件

第1,通过优化用于生产的公文,成立应用的生产版本。运转 npm run
build,精简下列进程:

代码检查;

剧本微风骨的链接和最小化;

编写翻译预处理器的输出;

尽量精简应用。

运维 npm run build 脚本后,通过 mytodo 项目根目录中的 dist
文件夹可访问用于生产的使用。这几个文件已选择开拓职员理解的布局服务置于服务器。

末了,运行 npm run serve:dist,在本地预览生成的行使。该命令在该地 Web
服务器上营造并加载项目。


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图