脚手架Yeoman，Polp

Yeoman

全局安装Yo

yarn global add yo # npm install yo --global

安装对应的generator

yarn global add generator-node # npm install generator-node --global

在项目工程文件夹下，通过yo运行generator

yo node    

根据一堆基本信息填入或者忽略形成一个基本的项目结构

运行Sub Generator命令格式yo node:cli 加入冒号

会新增一个目录结构

链接到全局
yarn link
安装依赖包
yarn

使用Yeamoan可以创建任意类型的项目，使用Yeoman步骤

• 明确你的需求
• 找到何时的Generator
• 全局安装找到的Geneerator
• 通过Yo运行对应的Generator
• 通过命令行交互填写选项
• 生成你所需要的项目结构

yeoman地址

Generator基本结构

yeoman中generators文件目录名称结构为generator-<name>

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

我们可以根据模板创建一个完整的vue,react项目，将基础项目架构放入templates中，writting方法中根据文件相对路径，遍历每个相对路径，生成相对于模板。发布到npm

Polp

一个小而美的脚手架工具，用于项目中创建特定文件类型的工具,类似于Yeoman的Sub Generator
举个例子：项目中经常要写页面，可能会有一个jsx或者tsx文件，还有一个样式文件，比如less文件，每次创建的时候，一些最基础的代码都是类似的，每次要写新页面的时候就会很繁琐，做一些重复的工作，这时可以用到plop

安装plop为开发依赖

yarn add plop --dev

根目录下创建一个plopfile.js文件

// plop入口文件，需要导出一个函数
// 此函数接受一个plop对象，用于创建生成器任务

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'application component',
    prompts: [
      {
        type: 'input',
        name: 'name', // 用户输入的组件名
        message: 'component name'
      }
    ],
    actions: [ // 执行动作
      {
        type: 'add', // 添加文件
        path: 'src/components/{{name}}/{{name}}.jsx', // 文件生成目录
        templateFile: 'component-plop-templates/component.jsx.hbs' // 生产文件对应模板目录
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.less',
        templateFile: 'component-plop-templates/component.less.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/{{name}}.test.jsx',
        templateFile: 'component-plop-templates/component.test.jsx.hbs'
      }
    ]
  })
}

根目录下还需要创建对应的模板文件

对应代码可以是

import React ,{memo}from 'react';
import './{{name}}.css';

const {{name}} =(props) => (
return(
<div className="{{name}}">

</div>
)

)
export default memo({{name}})

test模板文件

import React from 'react';
import ReactDOM from 'react-dom';
import {{name}} from './{{name}}';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<{{name}} />, div);
  ReactDOM.unmountComponentAtNode(div);
});

less文件比较简单

.{{name}} {

}

创建完毕后执行plopfile.js中的动作

yarn plop component 

这里的component 就是plop中生成器的名字,根据创建的名字，生成对应文件

方便快捷

plop使用注意事项

• 将plop模块作为项目开发依赖安装
• 在项目根目录下创建一个plopfile.js文件
• 在plopfile.js文件中定义脚手架任务
• 编写用于生成特定类型文件的模板
• 通过plop提供的CLI运行脚手架任务