scaffoldingTools

脚手架工具

脚手架工具概要（前端工程化的发起者）

• 脚手架的本质作用：创建项目基础架构、提供项目规范和约定
  1. 相同的组织结构
  2. 相同的开发规范
  3. 相同的模块依赖
  4. 相同的工具配置
  5. 相同的基础代码
• 举例：IDE创建项目的过程就是一个脚手架的工作流程

常用的脚手架工具

1. React项目：create-react-app
2. vue.js项目：vue-cli
3. angular项目：angular-cli

Yeoman(The web's scaffolding tool for modern webapps)

Yeoman 是一种高效、开源的 Web 应用脚手架搭建系统，意在精简开发过程。Yeoman 因其专注于提供脚手架功能而声誉鹊起，它支持使用各种不同的工具和接口协同优化项目的生成。

1. Yeoman 提供了一种灵活创建、开发、编译和调试 Web 应用的脚手架（scaffolding）软件。
2. 虽然 Yeoman 本身是 JavaScript 编写的，但适用于任何语言编写的应用。
3. Yeoman 支持与 Webpack、Babel、TypeScript、React 和 Angular 等多种第三方软件库的无缝集成。
4. Yeoman 内建立有一个基于 Node.js 的 HTTP 开发服务器，简化了开发环境的设置和开发过程的迭代。
   
   5.Yeoman 实现构建过程由开发环境到优化后生产环境间的无缝转移。
   Yeoman以上简介出自此博客

Yeoman 基本使用

1. node安装:
   • node版本：v14.15.4
   • npm版本：v6.14.10
   • node版本控制工具：nvm
2. Yeoman安装：yarn global add yo
3. 安装对应的generator：yarn global add generator-node
4. 使用：
   1. 创建目录： mkdir my-module
   2. 进入目录： cd my-module
   3. 运行：yo node
      

Sub Generator

• 有时我们并不需要去创建完整的项目结构，只是需要在已有的项目基础上创建一些特定类型的文件
• 给已有的项目创建readme,eslint,babel等，这些文件都有一些基础代码，自己手动去配很容易配错，通过生成器帮我们自动生成以提高效率yeoman 提供的  sub generator
• 命令：yo node:cli

• yarn link 到全局范围（命令：yarn link）
  • 注：新加了配置文件过后并没有安装相应的依赖,yarn命令运行安装操作
• 运行： 目录名 + --help

• mac中遇到的问题：

• 解决方法：sudo chmod -R 777 + 文件名

Yeoman 使用步骤总结

• 常规使用步骤：

  1. 明确你的需求；
  2. 找到合适的Generator；
  
  3. 全局范围安装找到的Generator；
  
  4. 通过Yo运行对应的Generator；
  
  5. 通过命令行交互填写选项；
  
  6. 生成你所需要的项目结构；
  

• 举例：创建一个网页应用

  1. 在Yeoman官网Yeoman找到对应的generator;
     
     

  2. 安装generator-webapp: yarn global add generator-webapp;

  3. 运行：yo webapp

自定义Generator

基于Yeoman搭建自己的脚手架

创建Generator模块

Generator本质上就是一个NPM模块

• Generator 基本结构
  
  
  
  

• Yeoman的Generator名称结构：generator-name

• 示例：

  • 创建目录：mkdir generator-sample
  • 创建package.json: yarn init
  • 安装yeoman-generator: yarn add yeoman-generator

  • 在generator-sample文件夹中创建如下图所示文件
    
    此处的index.js将入作用Generator的核心入口

    

// 此文件作为Generator的核心入口
// 需要导入一个继承自Yeoman Generator的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
// fs.write('绝对路径','文件的内容')

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
    wrting() {
        // Yeoman 自动在生成文件阶段调用此方法
        // 我们这里尝试往项目目录中写入文件
        this.fs.write(
            this.destinationPath('temp.txt'),
            Math.random().toString()
        )
    }
}

• 使用：yo + 模块名

根据模版创建文件

1. 创建一个templates文件夹， 将需要的模板文件放入此目录下
2. 运行：yo + 模块名

// 此文件作为Generator的核心入口
// 需要导入一个继承自Yeoman Generator的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入
// fs.write('绝对路径','文件的内容')

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
    wrting() {
        // Yeoman 自动在生成文件阶段调用此方法
        // 我们这里尝试往项目目录中写入文件
        // this.fs.write(
        //     this.destinationPath('temp.txt'),
        //     Math.random().toString()
        // )

        // 通过模版方式写入文件到目标目录
        // fs.copyTpl(模版文件的路径， 输出文件的路径,  模版文件的上下文)
        // 模版文件的路径
        const tmpl = this.templatePath('foo.txt');
        // 输出目标的路径
        const output = this.destinationPath('fll.txt');
        // 模版数据上下文
        const context = { title: 'hell yeoman', success: false };

        this.fs.copyTpl(tmpl, output, context);
    }
}

总结：相对于手动创建每一个文件， 模版的方式大大的提高了效率；

接收用户输入

// 此文件作为 Generator 的核心入口
// 需要导出一个继承自 Yeoman Generator 的类型
// Yeoman Generator 在工作时会自动调用我们在此类型中定义的一些生命周期方法
// 我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，例如文件写入

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
  prompting () {
    // Yeoman 在询问用户环节会自动调用此方法
    // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
    return this.prompt([
      {
        type: 'input',
        name: 'name',
        message: 'Your project name',
        default: this.appname // appname 为项目生成目录名称
      }
    ])
    .then(answers => {
      // answers => { name: 'user input value' }
      this.answers = answers
    })
  }
  writing () {
    // Yeoman 自动在生成文件阶段调用此方法

    // // 我们这里尝试往项目目录中写入文件
    // this.fs.write(
    //   this.destinationPath('temp.txt'),
    //   Math.random().toString()
    // )

    // -------------------------------------------------------

    // // 通过模板方式写入文件到目标目录

    // // 模板文件路径
    // const tmpl = this.templatePath('foo.txt')
    // // 输出目标路径
    // const output = this.destinationPath('foo.txt')
    // // 模板数据上下文
    // const context = { title: 'Hello zce~', success: false }

    // this.fs.copyTpl(tmpl, output, context)

    // -------------------------------------------------------

    // 模板文件路径
    const tmpl = this.templatePath('bar.html')
    // 输出目标路径
    const output = this.destinationPath('bar.html')
    // 模板数据上下文
    const context = this.answers

    this.fs.copyTpl(tmpl, output, context)
  }
}

Vue Generator案列

const Generator = require('yeoman-generator');

module.exports = class extends Generator {
    prompting() {
        return this.prompt([{
            type: "name",
            name: "name",
            message: "Your project name",
            default: this.appname
        }]).then(answers => {
            this.answers = answers;
        })
    }

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