青训营大项目 dumi以及plop的初始化

dumi

安装

yarn create @umijs/dumi-lib --site
yarn add dumi

运行：

yarn start
或
npm run start

plop

plop是一个小工具，让你可以在项目中方便的生成各种各样模板代码代码生成工具

yarn add plop -D

// plop.js
const { componentGenerator } = require('./generators/index.js');

module.exports = (plop) => {
  plop.setGenerator('创建组件', componentGenerator);
};

行为，依据模板创建文件

const path = require('path');

module.exports = {
  description: '创建组件',
  prompts: [
    {
      type: 'input',
      name: 'dir',
      message: '请输入 component 文件夹名称!',
    },
  ],
  actions: (data) => {
    const { dir } = data;
    const actions = [];

    // 组件入门文件
    actions.push({
      type: 'add',
      path: 'src/{{properCase dir}}/index.tsx',
      templateFile: 'generators/component/component.hbs',
    });

    // 样式文件
    actions.push({
      type: 'add',
      path: 'src/{{properCase dir}}/style/index.module.less',
      templateFile: 'generators/component/component.less.hbs',
    });

    // 测试文件
    actions.push({
      type: 'add',
      path: 'src/{{properCase dir}}/__test__/index.test.ts',
      templateFile: 'generators/component/component.test.hbs',
    });

    // 文档文件
    actions.push({
      type: 'add',
      path: 'src/{{properCase dir}}/index.md',
      templateFile: 'generators/component/component.md.hbs',
    });
    return actions;
  },
};

添加命令行

"scripts": {
    "plop":"plop"
}

运行时的效果：