关于yeoman:脚手架YeomanPolp

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