关于前端:Yeoman-通用脚手架工具

目录

• Yeoman

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

  • sub generator

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

  • 自定义 Generator

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

Yeoman

一个通用的脚手架工具。

长处 & 毛病

装置起步

yarn装置

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

npm装置

npm install -g yo
npm 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-sample
cd generator-sample
npm init
# 装置的这个模块提供了生成器的基类，基类中提供了一些工具函数，让咱们在创立生成器的时候更加的便捷。npm install yeoman-generator

1. 编写 index.js 外围文件

# 以后在 generator-sample 文件夹中，创立 app 文件夹
mkdir app
cd 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 myjob
cd myjob
yo 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 myjob
yo 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 myjob
yo 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 init
git status
git 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