狐七的个人博客

Appearance

Yeoman —— 自定义Generator ​

基于Yeoman搭建自己的脚手架。

Generator基本结构 ​

 𠃊 generators/  ...  生成器目录
 |   𠃊 app/ ... 默认生成器目录
 |   |     𠃊 index.js ... 默认生成器实现
+|   𠃊 component/  ... 如果有sub generator写这个目录下面
+|         𠃊 index.js ... 其他生成器实现
 𠃊 package.json ... 模块包配置文件

名称规范 ​

必须是generator-<name> 的格式

实践操作 ​

  1. 安装Generator生成器
bash
# 创建并进入目录
mkdir generator-sample
cd generator-sample
npm init
# 安装的这个模块提供了生成器的基类，基类中提供了一些工具函数，让我们在创建生成器的时候更加的便捷。
npm install yeoman-generator
  1. 编写index.js核心文件
bash
# 当前在generator-sample文件夹中，创建app文件夹
mkdir app
cd app

在app文件夹中创建index.js文件，里面写

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. 之后在别的项目中开始启用

bash
mkdir myjob
cd myjob
yo sample

就可以看到有对应的文件生成。

根据模板创建文件 ​

相对于手动创建每一个文件，模板的方式大大提高了效率

  1. 在app目录下面创建templates文件夹，里面添加一个foo.txt的模板文件
html
这是一个模板文件
内部可以使用 EJS 模板标记输出数据
例如： <%= title %>

<% if (success) {%>
哈哈哈
<% }%>
  1. 将app下面的index.js文件进行下面的修改
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. 运行
bash
cd myjob
yo sample
# create foo.txt

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

html
这是一个模板文件
内部可以使用 EJS 模板标记输出数据
例如： hello xm~


哈哈哈

动态接收用户输入数据 ​

如果我们在命令行中需要动态获取用户输入的数据，可以这样做。

  1. 在templates中创建一个test.html文件
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中做如下操作
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文件夹下执行
bash
cd myjob
yo sample
> ? your project name is : test myjob
> ? your title is : session1
#create test.html

可以看到生成文件

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中进行遍历输出
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写入
bash
# 初始化本地仓库
git init
git status
git add .
# 进行第一次提交
git commit -m 'init project'
  1. 打开gitHub创建一个远程仓库
bash
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

MIT Licensed

版权所有 © 2019-2024 Burning