写个模板，多摸两分钟的🐟

前端工程化创建模板的方式目前我了解的是采用hbs和node，使用还是属于比较方便的

一.直接使用vscode插件或添加用户代码片段

二.采用plop模板创建

1.plop安装

yan add plop

2.根目录下创建一个plop-template文件夹用来存放我们的模板文件

3.创建hbs模板文件(hbs文档：handlebarsjs.com/)

模板的具体内容可以根据需要编写，最近的项目用的react和dva创建了几个简单的模板文件大致长下面这个样子

./models.hbs

import APIFunction from 'services';
import { message } from 'antd';

const stateInit = {
  testText: '测试',
};

export default {
  namespace: '{{name}}',
  state: { ...stateInit },
  effects: {
    * getTest({ payload = {} }, { call, put }) {
      try {
        const response = yield call(APIFunction.login, payload);
        const { data, isError } = response;
        if (!isError && data) {
          yield put({
            type: 'save',
            payload: {},
          });
        } else {
          message.error('error！');
        }
      } catch (e) {}
    },
  },
  reducers: {
    save(state, { payload }) {
      return {
        ...state,
        ...payload,
      };
    },
    clear() {
      return {
        ...stateInit,
      };
    },
  },
};

./pages.hbs

/**
* @description {{name}}
* */

import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import s from './index.less';

const {{name}} = () => {
const [value, setValue] = useState('');

useEffect(() => {
 setValue('{{name}}');
}, []);

return (
 <div className={s.{{name}}Wrap}>{value}</div>
);
};

export default connect(
({ {{name}} }) => ({
 ...{{name}},
}),
dispatch => ({
 getTest: payload => {
   dispatch({
     type: '{{name}}/getTest',
     payload,
   });
 },
}),
)({{name}});

4. 根目录下还需要创建plopfile.js 用来将上一步创建的模板设置到对应的操作和路径下

module.exports = plop => {
  // create your generators here
  plop.setGenerator('addPage', {
    description: 'generate View',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'To add a page, enter a component name in upper case',
        default: 'admin',
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'src/pages/{{name}}/index.jsx',// 将文件添加到的具体位置
        templateFile: 'plop-template/pages.hbs',// 设置采用哪个具体的模板
      },
      {
        type: 'add',
        path: 'src/pages/{{name}}/index.less',
        templateFile: 'plop-template/index.less.hbs',
      },
      {
        type: 'add',
        path: 'src/pages/{{name}}/models/index.js',
        templateFile: 'plop-template/models.hbs',
      },
    ],
  });
};

5.配置到这里就差不多啦，接下来就是具体的使用了

1.yarn plop

2.选择需要进行的操作（这里我选了addPage）

3.输入需要生成的文件名后按回车就大功告成啦

对应的目录下面就生成了我们想要的模板文件了

三.采用node创建

em...这两天补起