Antd pro 組件構(gòu)造器

因為antd pro 框架 內(nèi)置 dva，以往每次新建頁面都需要新建 model service ui 這些文件。方便開發(fā)，今天寫了個腳本

/**
 * pages模版快速生成腳本,執(zhí)行命令 npm run tep
 */
const fs = require('fs');
const readline = require('readline');
console.log("\033[32m ***歡迎使用自助組件構(gòu)造器*** \033[0m")
const dirName = process.argv[2];
const dirName2 = process.argv[3];
if (!dirName || !dirName2) {
    console.log("\033[31m 參數(shù)有誤！ \033[0m")
    console.log("\033[32m 示例：node page.js memeda keai \033[0m")
    process.exit(0);
}

if (fs.existsSync(`./src/pages/src/${dirName}/${dirName2}`)) {
    console.log("\033[31m 第二個參數(shù)和現(xiàn)有組件名稱重復(fù)！ \033[0m")
    process.exit(0);
}

// 頁面模版 ui層
const indexTep = `
import React, { useEffect, useState } from 'react';
import style from './index.less';
import { IntrinsicElements } from './data.d';
import { connect } from 'dva';
import ConnectState from './connect';
const ${titleCase(dirName2)}: React.FC<IntrinsicElements> = props => {
    const { ${dirName2}, dispatch, loading } = props;
    useEffect(()=>{
        console.log(props)
    },[])
    return (
        <>
        <h1 className='${dirName2}-page'>
        如你所見，這是你的${dirName2}頁面。
        </h1>
        </>
    );
};
export default connect(
    ({
        ${dirName2},
        loading,
    }: {
        ${dirName2}: ConnectState;
        loading: { effects: { [key: string]: boolean } };
    }) => ({
        ${dirName2},
        loading,
    }),
)(${titleCase(dirName2)});

`;
// less文件模版
const lessTep = `
.${dirName2}-page {
}
`;

// model文件模版
const modelTep = `
import { demo } from './service';
import { StateType, ModelType } from './data';
import { message } from 'antd';
//初始狀態(tài)
const defaultState: StateType = {
    ceshi:'測試數(shù)據(jù)666'
};
const Model: ModelType = {
    namespace: '${dirName2}',
    state: defaultState,
    effects: {
        //改成自己的
        *getCompanyList({ callback }, { call, put }) {
            // const response = yield call(getCompanyList);
            // let payload = { data: response.content.data.data };
            // yield put({ type: 'save', payload });
        },
    },
    reducers: {
        save(state = { ...defaultState }, action) {
            return {
                ...state,
                ...action.payload,
            };
        },
    },
};
//Link to dva warehouse Ts declaration type
export type AdminState = Readonly<typeof defaultState>;
//Export the nodelist module(automatically register to the global)
export default Model;

`;


// service頁面模版
const serviceTep = `
import request from '@/utils/request';
//demo
export async function demo() {
  return request('/admin/company', {
    method: 'GET',
  });
}
`;
//dva 中間件 connect.d.ts

const connect = `
//鏈接dva倉庫聲明類型用
import { AdminState } from './model';

interface ConnectState {
    ${dirName2}: AdminState;
}

export default ConnectState;
`
const dataType = `
import { EffectsCommandMap, Model } from 'dva';
import { AnyAction, Reducer } from 'redux';
//jsx節(jié)點
export interface IntrinsicElements {
    [elemName: string]: any;
}
//dva ts定義
export interface StateType {
    ceshi:string
}
export type Effect = (
    action: AnyAction,
    effects: EffectsCommandMap & { select: <T>(func: (state: StateType) => T) => T },
) => void;

export interface ModelType {
    namespace: string;
    state: StateType;
    effects: {
        getCompanyList: Effect;
    };
    reducers: {
        save: Reducer<StateType>;
    };
}
//dva ts定義結(jié)束

`

fs.mkdirSync(`./src/pages/src/${titleCase(dirName)}`); //創(chuàng)建文件夾
// process.chdir(`./src/pages/src/${titleCase(dirName)}`);
fs.mkdirSync(`./src/pages/src/${titleCase(dirName)}/${dirName2}`);//創(chuàng)建文件夾
process.chdir(`./src/pages/src/${titleCase(dirName)}/${dirName2}`);//cd
fs.writeFileSync('index.tsx', indexTep);
console.log("\033[32m index.tsx 創(chuàng)建成功！ \033[0m")
fs.writeFileSync('index.less', lessTep);
console.log("\033[32m index.less 創(chuàng)建成功！ \033[0m")
fs.writeFileSync('model.ts', modelTep);
console.log("\033[32m model.ts 創(chuàng)建成功！ \033[0m")
fs.writeFileSync('service.ts', serviceTep);
console.log("\033[32m service.ts 創(chuàng)建成功！ \033[0m")
fs.writeFileSync('connect.d.ts', connect);
console.log("\033[32m connect.d.ts 創(chuàng)建成功！ \033[0m")
fs.writeFileSync('data.d.ts', dataType);
console.log("\033[32m 恭喜 頁面創(chuàng)建成功！ \033[0m")

function titleCase(str) {
    const array = str.toLowerCase().split(' ');
    for (let i = 0; i < array.length; i++) {
        array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
    }
    const string = array.join(' ');
    return string;
}
process.exit(0);

node page.js memeda keai   //用法 

上面的 ./src/pages/src/ 為你組件的根目錄 ，不一樣可以改成自己的目錄地址，我這個腳本默認創(chuàng)建

二級頁面，如果不想創(chuàng)建二級頁面，對應(yīng)修改規(guī)則即可。