关于脚手架的前端知识

脚手架

•  脚手架的本质作用

1. 创建项目基础结构，提供项目规范和约定
2. 相同的组织结构
3. 相同的开发范式
4. 相同的模块依赖
5. 相同的工具配置
6.  相同的代码基础

• 常用脚手架工具 

1.  服务自身项目的一类：create-react-app、vue-cli、angular-cli

2. 通用性脚手架工具：yeoman

3. 创建特定类型的脚手架：plop

 脚手架学习 

• yeoman 

1. 一款高效，开源的web应用脚手架搭建系统，专注提供脚手架功能。并不是针对某个项目，没有针对性 

2. yeoman使用
   （1）安装  yarn global add yo
   （2）yo必须搭配特定的generator使用，需要找到对应的generator
   generator-node为例，输入 yo node
    

    C:\Users\123\Desktop\blogs\modules\app>yo node
           ? Module Name (app)
           ? Description
           ? Project homepage url
           ? Author's Name (cuiweijun)
           ? Author's Email (834719201@qq.com)
           ? Author's Homepage ()
           ? Package keywords (comma to split) test node 
           ? Send coverage reports to coveralls (Y/n)
           ? Enter Node versions (comma separated)
           ? GitHub username or organization (cuiweijun)
           ? Which license do you want to use? (Use arrow keys)
             Apache 2.0
           > MIT
             Mozilla Public License 2.0
             BSD 2-Clause (FreeBSD) License
             BSD 3-Clause (NewBSD) License
             Internet Systems Consortium (ISC) License
             GNU AGPL 3.0
           (Move up and down to reveal more choices)
           
           I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself. 下载状态
           ```
   
           !

   下载完后会出现卡死状态 按下回车就ok，生成一个node的项目结构就出来了。
   （3） 自定义generator
    Generator本质就是一个npm的模块
    Generator的基本结构：

   - 必须有一个generators的文件夹

             - 文件夹下有个叫app的文件夹   存放生成器对应的代码

               - app文件夹里有个index.js的文件
   
   package.json：命名必须是generator-<name>的形式命名 比如 generator-sample
   （4）过程操作
    创建`package.json`   yarn init
    下载generator的基类  yeoman-generator
   

   generators/app/index.js
    

    //generators/app/index.js
           const Generator = require('yeoman-generator');
           module.exports = class extends Generator{
               initianlizing(){
                   //获取当前项目状态，获取基本配置参数等
               }
               prompting(){
                   //向用户展示交互式问题收集关键参数
               }
               configuring(){
                   //保存配置相关信息且生成配置文件（名称多为'.'开头的配置文件,例如.editorconfig）
               }
               default(){
                   //未匹配任何生命周期方法的非私有方法均在此环节*自动*执行
               }
               writing(){
                   //依据模板进行新项目结构的写操作
               }
               conflicts(){
                   //处理冲突(内部调用，一般不用处理）
               }
               install(){
                   //使用指定的包管理工具进行依赖安装(支持npm,bower,yarn)
               }
               end(){
                   //结束动作，例如清屏，输出结束信息，say GoodBye等等
               }
           }

   创建好之后，使用yarn/npm link 链接全局环境
   yo <name> 就会执行

• plop 

1. 创建项目中特定类型的文件的工具
2.  案例 每创建一个文件夹 对应自动生成3个文件 `js css html` 

（1）下载`plop yarn add plop --dev` 
       （2）在当前项目下创建一个`plopfile.js`的文件

//plopfile.js
        // plop入口文件 需要导出一个函数
        module.exports=function(plop){
            plop.setGenerator("component",{  //设定一个生成器
                description:"create a component", //对这个生成器的描述
                prompts:[  //提示
                    {
                        type:"input",  //交互类型
                        name:"name", //参数名称
                        message:"component name", //交互提示
                        default:"myComponent"//默认值
                    }
                ],
                actions:[
                    {
                        type:"add",
                        path:"src/components/{{name}}/{{name}}.js", //{{}}双大括号内设置动态参数
                        templateFile:"templates/template.hbs"//模板所在地址使用hbs文件
                    },
                  {
                        type:"add",
                        path:"src/components/{{name}}/{{name}}.css",
                        templateFile:"templates/template.hbs"
                    },
                    {
                        type:"add",
                        path:"src/components/{{name}}/{{name}}.html",
                        templateFile:"templates/template.hbs"
                    }
                ]
            })
        }

（3）完成之后 指令  `yarn plop component ` component是生成器，就可以生成对应得生成器