tf--address-h5 v0.1.0-1

快速开始

2 分钟发布一个组件

环境

$ node -v
$ v14.18.1

# npm设置内网地址
$ npm config set registry http://10.77.0.105:4873

# 内网npm登录 账号密码自己造
$ npm login

# 安装脚手架
$ npm i tf-magic-runner -g

magic -v 或者 tf-magic-runner -v 查看版本

创建新组件

# stage1.创建项目模板magic create tf-components并下载好依赖
$ magic create tf-<pkg> & cd tf-<pkg> & npm i

# stage2 预览并修改 package.json 里的author 字段，
$ magic start

# stage3. 发预发版到npm 与组件平台与Git (没登内网 npm的先npm login，账号密码任意填)
$ magic pub -m <msg>

# stage4. 控制台收到一个预览地址，打开点击左侧菜单栏小火箭提交审核,联系傅建良@24952

# stage5. 审核通过以后发布正式版本 -wx可以推送到群
$ magic latest -wx <msg>

现有组件

# stage1. 在项目根目录下中创建配置文件runner.config.js
$ magic init

# stage2. 创建MDX文档,修改配置文件的themeConfig.navs信息,修改gitignore（magic create模板copy下）

# stage3. 从创建新组件的stage2开始

修改配置文件中 themeConfig.navs

{
  "path": "/ComponentA",// 预览平台的路由
  "mdx": "./src/components/ComponentA/README.mdx", // mdx位置
  "title": "组件脚手架介绍", // 不写默认以MD文件第一行H1标题为title
  "component": "./src/components/ComponentA/index.tsx", // 组件位置
  "mock": "./mock.js" // 如果有的话
}

README.md 文档编写

对于组件中的标准文档，请参考后编写：详情

MOCK 数据

magic create 的模板里有一个 mock 数据的例子，照着抄就行

1.在组件目录下创建 mock 函数

export default {
  "POST /appApi/getComponentName": (req, res) => {
    res.send({
      code: 0,
      msg: "success",
      data: 0,
    });
  },
};

2.通过 tf-request 的别名@/utils/request 调用

import request from "@/utils/request";
export async function getComponentName(data: any): Promise<any> {
  return request("/appApi/getComponentName", {
    method: "POST",
    data,
    body: data,
  });
}

多组件/md 与组件不在同一个目录下如何打包?

• 使用模板创建的规范目录无需变动
• 非标准目录需配置：
  1. magic init 创建 runner.config.js
  2. 配置 navs 参数，使文档找到对应的组件

navs: [
  { component: "./src/componentA/index.js", mdx: "./anywhere/readme.md" },
  { component: "./src/componentB/index.js", mdx: "./other/readme.md" },
];

微信推送

# 在更新latest版本时可以使用微信机器人推送，
$ magic latest -wx [msg]

# 如果pub或者latest命令中已经有-m，可以选填-wx后面的信息
$ magic latest -m "git log" -wx

注意同一个项目多组件,需要在 runner.config.js 填写想推送的组件。具体配置见下，也可以先使用上述命令，再复制提示的 json

API

tf-magic-runner命令集

runner.config.js

navs

mdx 文件目录下有 index.(js|jsx|tx|txs)时无需配置

wx

项目单组件不需配置 多组件需要选择你想推送的的组件

  wx:[{
    author:'傅建良',
    url:'http://magic.tf56.lo/tf-magic-runner/start',
    version:'1.0.1',
    pkg:'tf-magic-runner',
    wxmsg:'\n 1.支持微信推送\n 2.webpack升级到5\n 3.分离css,js'
  }]