目录

  • Yeoman

    • 长处 & 毛病
    • 装置起步
    • 根本应用

    • sub generator

      • 实例：将我的项目变成cli我的项目
      • 应用步骤总结

    • 自定义Generator

      • Generator根本构造
      • 名称标准
      • 实际操作
      • 依据模板创立文件
      • 动静接管用户输出数据
      • 自定义一个带有肯定根底代码的vue我的项目脚手架
      • 公布Generator

Yeoman

一个通用的脚手架工具。

长处 & 毛病

长处 & 毛病内容
长处更像脚手架的运行平台，Yeoman搭配不同的generator能够创立任何类型的我的项目，咱们能够依据本人的generator定制本人的前端脚手架
毛病长处即毛病，过于通用不够专一

装置起步

yarn装置

# 装置yarn工具进行装置npm install -g yarn# 查看yarn是否装置好yarn -v# 1.22.5# 全局装置yeomanyarn global add yo# 搭配应用node的generator才算装置结束yarn global add generator-node

npm装置

npm install -g yonpm install -g generator-node

根本应用

yo node

会呈现上面的发问

# 模块名称? Module Name my_modules# (node:13036) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated# 曾经在npm上存在，是否抉择别的？? The name above already exists on npm, choose another? No# 形容? Description node_modules# 工程主页? Project homepage url https://gitee.com/burningQiQi/# 作者名称? Authors Name csf# 作者邮箱? Authors Email shuangfeng1993@163.com# 作者主页? Authors Homepage https://gitee.com/burningQiQi/# 关键词? Package keywords (comma to split) node,modules,yeoman# 是否发送代码覆盖率到一个平台上？? Send coverage reports to coveralls No# 应用node版本，不写就是所有的? Enter Node versions (comma separated) # GitHub名称和组织者? GitHub username or organization csf# 我的项目license? Which license do you want to use? MIT#    create package.json#     force .yo-rc.json#     force C:\Users\韵七七\.yo-rc-global.json#    create README.md#    create .editorconfig#    create .gitattributes#    create .gitignore#    create .travis.yml#    create .eslintignore#    create lib\index.js#    create LICENSE#    create lib\__tests__\myModules.test.js

装置实现之后，我的项目目录中主动就有了上面的配置文件

sub generator

有时候咱们并不需要创立残缺的我的项目构造，只须要在原有我的项目的根底上创立一些特定的文件，例如在我的项目中增加yeoman，比方在我的项目中增加eslint，babel配置文件。

咱们能够通过生成器帮咱们实现

实例：将我的项目变成cli我的项目

在下面创立我的项目的根底上，上面举例咱们通过node上面的cli生成器帮咱们生成一些cli的文件，把模块变成cli利用

yo node:cli# > conflict package.json# 询问咱们是不是要重写package.json文件，咱们增加cli的时候会有新的模块和依赖，抉择yes# > ? Overwrite package.json? overwrite# 帮咱们重写了package.json并且创立了一个cli.js的文件#     force package.json#     create lib\cli.js

而后能够看到package.json中有了cli的相应配置

咱们就能够用名称当做全局的命令行模块应用了。

# 将 npm模块/yarn模块 链接到对应的运行我的项目中去，不便地对模块进行调试和测试npm link / yarn link# 上面运行胜利阐明，cli利用能够失常的工作了my_modules --help# node_modules#   Usage#     $ my_modules [input]#   Options#     --foo  Lorem ipsum. [Default: false]#   Examples#     $ my_modules#     unicorns#     $ my_modules rainbows#     unicorns & rainbows
下面只是cli的，还能够装置别的 generator-node

并不是所有的generator都提供子集生成器，须要通过官网文档确定

应用步骤总结
  1. 明确需要
  2. 找到适合的Generator yeoman官网

  1. 全局范畴装置找到的Generator
  2. 通过Yo运行对应的Generator
  3. 通过命令行交互填写选项
  4. 生成你所须要的我的项目构造

自定义Generator

基于Yeoman搭建本人的脚手架。

Generator根本构造
 ???? generators/  ...  生成器目录 |   ???? app/ ... 默认生成器目录 |   |     ???? index.js ... 默认生成器实现+|   ???? component/  ... 如果有sub generator写这个目录上面+|         ???? index.js ... 其余生成器实现 ???? package.json ... 模块包配置文件
名称标准

必须是generator-<name> 的格局

实际操作
  1. 装置Generator生成器
# 创立并进入目录mkdir generator-samplecd generator-samplenpm init# 装置的这个模块提供了生成器的基类，基类中提供了一些工具函数，让咱们在创立生成器的时候更加的便捷。npm install yeoman-generator
  1. 编写index.js外围文件
# 以后在generator-sample文件夹中，创立app文件夹mkdir appcd app

在app文件夹中创立index.js文件，外面写

/** * 此文件作为 Generator 的外围入口 * 须要导出一个继承自 Yeoman Generator 的类型 * Yeoman Generator 在工作时会主动调用咱们在此类型中定义的一些生命周期办法 * 咱们在这些办法中能够通过调用父类提供的一些工具办法实现一些性能，例如文件写入 */ const Generator = require('yeoman-generator') module.exports = class extends Generator {   writing () {     // Yeoman 主动在生成文件阶段调用此办法     // 咱们这里尝试往我的项目目录中写入文件     this.fs.write(       this.destinationPath('temp.txt'),       Math.random().toString()     )   } }
  1. 而后用npm link将我的项目弄到全局
  2. 之后在别的我的项目中开始启用
mkdir myjobcd myjobyo sample

就能够看到有对应的文件生成。

依据模板创立文件

绝对于手动创立每一个文件，模板的形式大大提高了效率

  1. 在app目录上面创立templates文件夹，外面增加一个foo.txt的模板文件
这是一个模板文件外部能够应用 EJS 模板标记输入数据例如： <%= title %><% if (success) {%>哈哈哈<% }%>
  1. 将app上面的index.js文件进行上面的批改
 const Generator = require('yeoman-generator')  module.exports = class extends Generator {   writing () {    // 应用模板形式写入文件到目标目录        // 模板文件门路    const tmpl = this.templatePath('foo.txt')    // 输入指标门路    const output = this.destinationPath('foo.txt')    // 模板数据上下文    const context = { title: 'hello xm~', success: true}    // 这个办法会把模板文件映射到输入文件上    this.fs.copyTpl(tmpl, output, context)   } }
  1. 运行
cd myjobyo sample# create foo.txt

能够看到myjob上面生成了一个foo.txt文件，内容如下：

这是一个模板文件外部能够应用 EJS 模板标记输入数据例如： hello xm~哈哈哈
动静接管用户输出数据

如果咱们在命令行中须要动静获取用户输出的数据，能够这样做。

  1. 在templates中创立一个test.html文件
<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title><%= name%></title></head><body>  <h1><%= title%></h1></body></html>
  1. 在index.js中做如下操作
 const Generator = require('yeoman-generator') module.exports = class extends Generator {   prompting() {     // Yeoman再次询问用户环节会主动调用此办法     // 在此办法中能够调用父类的 prompt() 办法收回对用户的命令行询问     // this.prompt接管一个数组，数组的每一项都是一个问题     // this.prompt返回一个promise对象         return this.prompt([      {        // input 应用用户输出的形式接管提交信息        type: 'input',        // 最终失去后果的键        name: 'name',        // 给用户的提醒        message: 'your project name is :',        // 默认值        default: this.appname // appname 为我的项目生成目录名称      },      {        type: 'input',        name: 'title',        message: 'your title is :',        default: '目录'      },     ])     .then(answers => {       // answers是用户输出后咱们拿到的一个后果       // answers => { name: 'user input value', title: 'user input value'}       // 赋值给属性咱们能够在writing中应用它       this.answers = answers     })   }   writing () {    // 应用模板形式写入文件到目标目录        // 模板文件门路    const tmpl = this.templatePath('test.html')    // 输入指标门路    const output = this.destinationPath('test.html')    // 模板数据上下文    const context = { name: this.answers.name, title: this.answers.title}    // 这个办法会把模板文件映射到输入文件上    this.fs.copyTpl(tmpl, output, context)   } }
  1. 在myjob文件夹下执行
cd myjobyo sample> ? your project name is : test myjob> ? your title is : session1#create test.html

能够看到生成文件

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>test myjob</title></head><body>  <h1>session1</h1></body></html>
自定义一个带有肯定根底代码的vue我的项目脚手架
  1. 也是在generators外面创立目录构造，而后将整个的vue我的项目(本人的)放到templates文件夹外面。如同上面：

  1. 在index.js中进行遍历输入
writing () {    // 把每一个文件都通过模板转换到指标门路    const templates = [      '.browserslistrc',      '.editorconfig',      '.env.development',      '.env.production',      '.eslintrc.js',      '.gitignore',      'babel.config.js',      'package.json',      'postcss.config.js',      'README.md',      'public/favicon.ico',      'public/index.html',      'src/App.vue',      'src/main.js',      'src/router.js',      'src/assets/logo.png',      'src/components/HelloWorld.vue',      'src/store/actions.js',      'src/store/getters.js',      'src/store/index.js',      'src/store/mutations.js',      'src/store/state.js',      'src/utils/request.js',      'src/views/About.vue',      'src/views/Home.vue'    ]    templates.forEach(item => {      // item => 每个文件门路      this.fs.copyTpl(        this.templatePath(item),        this.destinationPath(item),        this.answers      )    })  }

这样去别的文件夹下执行yo脚手架，就能够失去咱们想要的自定义vue目录构造。

公布Generator

Generator理论是一个npm模块，那么公布generator就是公布npm模块，咱们须要通过npm publish命令公布成一个公开的模块就能够。

  1. 先创立本地仓库，创立.gitignore文件，把node_modules写入
# 初始化本地仓库git initgit statusgit add .# 进行第一次提交git commit -m 'init project'
  1. 关上gitHub创立一个近程仓库
git remote add origin <仓库ssh地址># 把本地代码推送到近程master分支git push -u origin master# 进行公布npm publish# 确定version\username\password
  • 应用淘宝的镜像源是不能够的，因为淘宝镜像源是一个只读镜像，须要先扭转npm镜像
  • 推送胜利之后再npm官网能够看到，下次就能够间接npm装置了

PS: 如果generator要在官网的仓库列表中呈现，须要在项目名称中增加yeoman-的关键词，这个时候Yeoman的官网会发现我的项目。

举例子，我发了一个demo脚手架去官网，没有什么性能就是练习， generator-csfdemo