脚手架工具

作用：创建项目基础结构、提供项目规范和约定

1.常用的脚手架工具

**
**

React项目 ->create react app

Vue.js项目 ->vue-cli

Angular项目->angular-cli

根据信息创建对应的项目基础结构

Yeoman：通用型项目脚手架工具（灵活、易扩展）

Plop：创建特定类型的文件（一个组件或者模块所需的文件）

2.Yeoman

用于创造现代化web应用的脚手架工具

基本使用：

（1）确定node、npm和yarn的版本

（2）安装yo：命令为yarn global add yo

（3）安装generator-node：yarn add generator-node

（4）通过yo运行generator：yo node\

\

3.Sub Generator

创建一些配置文件。

命令 yo node:cli

\

4.自定义Generator

基于Yeoman搭建自己的脚手架

创建Generator模块，本质上就是创建一个NPM模块

模块名称必须是generator-

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

5.Vue Generator案例

1.mkdir 创建vue目录

2.yarn init初始化package.json

3.安装yoeman依赖 yarn add yoeman-generator

4.新建generator主入口文件generators/app/index.js

5.编写index.js

const Generator = require('yeoman-generator')

module.exports = class extends Generator {
    prompting(){
        return this.prompt([
            {
                type:'input',
                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 =>
        {
            this.fs.copyTpl(
                //item =>每一个文件路径
                this.templatePath(item),
                this.destinationPath(item),
                this.answers
            )
        })
    }
}

6.通过yarn link的方式link generator模块到全局

7.使用yo ***-vue 运行创建的generator

5.发布Generator

就是发布一个npm模块

1.创建gitignore用于忽略node_modules：echo node_modules > .gitignore

2.创建本地空仓库：git init

3.状态查询：git status

4.git add .

5.创建一次提交 git commit -m "feat:init"

6.同步到远端仓库git remote add origin 远端仓库地址

7.git push -u origin master

8.发布模块：yarn publish

6.Plop

一款小型脚手架工具，用于创建项目中重复的文件，提高效率

7.Plop的使用

1.安装plop依赖yarn add plop --dev

2.创建plopfile.js,plop的入口文件，需要导出一个函数，此函数接收一个plop对象，用于创建生成器任务

3.编写用于生成特定文件的模板

4.通过yarn plop 生成器名称 生成新的文件（根据模板创建）

8.脚手架的工作原理

bin字段用于指定cli的入口文件

cli必须要有一个文件头 #!/usr/bin/env node

脚手架的工作过程：

1.通过命令行交互询问用户问题

2.根据用户回答的结果生成文件

意义：项目创建环节大大提高效率