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运行脚手架工作