前端页面快速生成工具create-my-app

工具说明

我构建这个工具，主要是为了在项目中快速新增页面。尤其适用于页面、模块相似的业务场景。
省略了手动拷贝生成文件夹等方式，可以通过全局安装create-my-app工具，在工程下新增.createPage.js配置文件后。就可以根据配置文件中映射的模板内容，去相应的目录下新增文件
工具是基于ejs的，所以在设计模板时，格式需要按照ejs的模板格式

具体代码的git地址：https://github.com/dmaria58/create-page

具体使用案例我就搬了下在项目中readme.md中的案例说明：

Install

$ npm install create-my-page -g

Usage

进入你需要快速新建页面的工程
并且再工程内新增 .createPage.js 文件

.createPage.js Usage Example（新增案例）

module.exports={
    "Test2": [
        {
            "type": "add",
            "name":"Test2.js",
            "from": "/templatePage/normal.js",
            "to": "/page/Test2/",
            "keys": { "name": "Test2的模块", "page": "Test2" },
            "isReplace":true
        }
    ]
}

实例中的Test2为执行create-my-page时对应的key
新增完配置文件.createPage.js后，具体执行命令如下：

$ create-my-page
? input your page name Test2
success add Test2.js

当输入的page name和配置的.createPage.js中配置的key无一匹配时，会报错如下：

$ create-my-page
? input your page name Test3
no page to add

.createPage.js 配置参数说明

参数	说明
type	add/edit,add为新增文件，edit为编辑已有文件（此模式在需要编辑的文件末尾新增需要新增的内容）
name	新增或者编辑的文件名
to	新增或者编辑的文件所在的路径
from	模板文件所在的地址，以及模板文件名。如果此字段为空或不存在，则默认新增一个空文件
keys	ejs模板中替换的key的名称（具体参照模板说明中的使用方式）
detail	该参数只针对type=edit有效，编辑文件时，文件末尾新增detail里的内容。如果此字段为空，则文件末尾新增模板对应的内容
isReplace	该参数只针对type=add有效，当新增的文件存在时，为true则替换，为false则不替换。默认为false

模板说明

ejs的官网说明：https://ejs.bootcss.com/
根据以上.createPage.js
例如keys的内容为："keys": { "name": "Test2的模块", "page": "Test2" }
keys中的内容，其实就相当于ejs.render(str, data, options);中的options的值
对应的模板/templatePage/normal.js内容如下：

import React from 'react';
class <%= page %> extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        Hi，<%= name %>
      </div>
    );
  }
}
export default <%= page %>;

则执行了以下命令后

$ create-my-page
? input your page name Test3
no page to add

会在/page/Test2/生成一个Test2.js文件，对应的js文件内容如下

import React from 'react';
class Test2 extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        Hi，Test2的模块
      </div>
    );
  }
}
export default Test2;

edit案例

如果.createPage.js 配置如下

module.exports={
    "Test2": [
        {
            "type": "add",
            "name":"Test2.js",
            "from": "/templatePage/normal.js",
            "to": "/page/Test2/",
            "keys": { "name": "Test2的模块", "page": "Test2" },
            "isReplace":true
        },
        {
            "type": "edit",
            "name":"detail.js",
            "details": "console.log(a);",
            "to": "/page/Test2/"
        }        
    ]
}

原先detail.js文件内容如下

var a=1;

执行了命令后，原先的 detail.js文件末尾会被新增details中的内容，变成如下内容

var a=1;
console.log(a);

如果edit的内容变成如下，则意味着detail.js新增模板normal.js的内容

        {
            "type": "edit",
            "name":"detail.js",
            "from": "/templatePage/normal.js",
            "keys": { "name": "detail的模块", "page": "Detail" },
            "to": "/page/Test2/"
        }  

则detail.js文件会被编辑为：

var a=1;
import React from 'react';
class Detail extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        Hi，detail的模块
      </div>
    );
  }
}
export default Detail;