开始

安装

npm i @avairain/j2r

配置文件

j2r.config.json

{
  "file": "input.json", // 入口
  "template": "./template/index.html", // 模板回填 page.title page.cssLink
  "root": "./dist" // 导出
}

构建

j2rbuild

监听入口文件

j2r

修改配置文件

j2r --config=your.config.json --root=dist

input.json

{
  "route": { // 路由 基于 react-router-dom
    "type": "BrowserRouter", // react-router-dom HashRouter BrowserRouter,
    "children": [ // 子节点（路由）
      {
        "type": "Route",
        "props": {
          "path": "/" // 路由
        },
        "children": [
          {
            "type": "View.B" // view.B 组件
          }
        ]
      },
      {
        "type": "span",
        "children": ["span"]
      }
    ]
  },
  "view": {
    "B": {
      "type": "div",
      "usingHooks": [ // 使用的hooks
        {
          "name": "useState, useEffect",
          "package": "react"
        },
        {
          "name": "useBoolean",
          "package": "ahooks" // 第三方的包需要手动安装
        }
      ],
      "props": {
        "onClick": "function: (e) => console.log(e)",
        "style": {
          "color": "red"
        }
      },
      "children": [
        "c",
        "{props.children}",
        {
          "type": "AAAA.B" // import OtherLib from 'other-lib' AAA => a-a-a
        }
      ] // <div onClick={(e) => console.log(e)}>{props.children}</div>
    }
  },
   "page": {
    "title": "页面标题",
    "cssLink": ["css链接"],
    "appRoot": "根节点",
    "body": [
      {
        "type": "元素类型",
        "props": { // 元素属性
          "id": "root"
        }
      }
    ]
  }
}