使用命令快速创建页面

一个页面可能包含固定的几个文件，如果一个个创建就不太方便，利用node通过命令的方式快捷创建出你的页面

├─index
├─index.config.ts
├─index.scss
├─index.tsx
├─interface.d.ts
├─model.ts
├─service.ts

效果

获取用户输入的内容

const fs = require('fs');
const dirName = process.argv[2];
// 转换成大写 test => Test ; test-page => TestPage
const capPirName = dirName.split('-').map(str=>str.substring(0, 1).toUpperCase() + str.substring(1)).join('')
if (!dirName) {
    console.error('示例：npm run tep 名称');
    process.exit(0);
}

创建六件套文件

1. 创建config模板

变量通过用户输入获取

const config = `
export default {
  navigationBarTitleText: "${dirName}"
}
`

2. 创建scss模板

const scss = `
${dirName}-wrap {
    width: 100%;
    min-height: 100vh;
}
`

3. 创建tsx模板

const tsx = `
import React, { Component, useState, useEffect, FC } from 'react'
import Taro from "@tarojs/taro";
import { View } from '@tarojs/components'
import { ${capPirName}Props } from './interface';
import { get${capPirName}List } from './service';
import "./index.scss";
const ${capPirName}: FC<${capPirName}Props> = (props) => {
    return (
        <View className="${dirName}-wrap" >
            ${dirName}
        </View>
    )
}
export default ${capPirName}
`

4. 创建interface模板

const interface = `
export interface ${capPirName}Props {
}
`

5. 创建model模板

const model = `
import { Effect } from "dva";
import { Reducer } from "redux";
export interface ${capPirName}ModelState {
}
export interface ${capPirName}ModelType {
    namespace: "${dirName}";
    state: ${capPirName}ModelState;
    effects: {
        fetch${capPirName}: Effect;
    };
    reducers: {
        save${capPirName}: Reducer<${capPirName}ModelState>;
    };
}
const initState: ${capPirName}ModelState = {
};
const ${capPirName}Model: ${capPirName}ModelType = {
    namespace: "${dirName}",
    state: initState,
    effects: {
        *fetch${capPirName}(_, { call, put }) {
        },
    },
    reducers: {
        save${capPirName}(state = initState, action) {
            return { ...state, ...action.payload }
        }
    }
};
export default ${capPirName}Model;
`

6. 创建service模板

const service = `
import fly from "@/utils/request";
export function get${capPirName}List() {
    return fly.request({
        url: "/api/${dirName}",
        method: "get"
    });
}
`

补充

自动将创建的文件引入到路由和redux中

// 敬请期待...

使用 fs 写入文件

fs.mkdirSync(`./src/pages/${dirName}`);
process.chdir(`./src/pages/${dirName}`);
fs.writeFileSync('model.ts', model);                // 1
fs.writeFileSync(`index.tsx`, tsx);        // 2
fs.writeFileSync('service.ts', service);        // 3
fs.writeFileSync(`index.scss`, scss);    // 4
fs.writeFileSync('index.config.ts', config);// 5
fs.writeFileSync(`interface.d.ts`, interface); // 6
process.exit(0);

完整的代码

使用node执行即可 node xxx.js
我把这个文件选择放在 scripts/template.js

const fs = require('fs');
const dirName = process.argv[2];
// 转换成大写 test => Test ; test-page => TestPage
const capPirName = dirName.split('-').map(str => str.substring(0, 1).toUpperCase() + str.substring(1)).join('')
if (!dirName) {
    console.error('示例：npm run tep 名称');
    process.exit(0);
}
const config = `
export default {
  navigationBarTitleText: "${dirName}"
}
`
const scss = `
${dirName}-wrap {
    width: 100%;
    min-height: 100vh;
}
`
const tsx = `
import React, { Component, useState, useEffect, FC } from 'react'
import Taro from "@tarojs/taro";
import { View } from '@tarojs/components'
import { ${capPirName}Props } from './interface';
import { get${capPirName}List } from './service';
import "./index.scss";
const ${capPirName}: FC<${capPirName}Props> = (props) => {
    return (
        <View className="${dirName}-wrap" >
            ${dirName}
        </View>
    )
}
export default ${capPirName}
`
const interface = `
export interface ${capPirName}Props {
}
`
const model = `
import { Effect } from "dva";
import { Reducer } from "redux";
export interface ${capPirName}ModelState {
}
export interface ${capPirName}ModelType {
    namespace: "${dirName}";
    state: ${capPirName}ModelState;
    effects: {
        fetch${capPirName}: Effect;
    };
    reducers: {
        save${capPirName}: Reducer<${capPirName}ModelState>;
    };
}
const initState: ${capPirName}ModelState = {
};
const ${capPirName}Model: ${capPirName}ModelType = {
    namespace: "${dirName}",
    state: initState,
    effects: {
        *fetch${capPirName}(_, { call, put }) {
        },
    },
    reducers: {
        save${capPirName}(state = initState, action) {
            return { ...state, ...action.payload }
        }
    }
};
export default ${capPirName}Model;
`
const service = `
import fly from "@/utils/request";
export function get${capPirName}List() {
    return fly.request({
        url: "/api/${dirName}",
        method: "get"
    });
}
`
fs.mkdirSync(`./src/pages/${dirName}`);
process.chdir(`./src/pages/${dirName}`);
fs.writeFileSync('model.ts', model);                // 1
fs.writeFileSync(`index.tsx`, tsx);        // 2
fs.writeFileSync('service.ts', service);        // 3
fs.writeFileSync(`index.scss`, scss);    // 4
fs.writeFileSync('index.config.ts', config);// 5
fs.writeFileSync(`interface.d.ts`, interface); // 6
process.exit(0);

最后将引入到package.json中

找到scripts的对象， 加

"scripts": {
      "tep":"node scripts/template.js", // 引入你的文件路径~
       // ... 省略一大堆
    "dev:jd": "npm run build:jd -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  },

开始使用

自动引入实现中…

• 记得手动将页面引入 [ app.config.ts ] 中

  // xxx为你的页面名称
  使用npm
  npm run tep xxx 
  使用yarn
  npm tep xxx