0.1.0-2 • Published 2 years ago
tf-address-pc v0.1.0-2
快速开始
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 与组件不在同一个目录下如何打包?
- 使用模板创建的规范目录无需变动
- 非标准目录需配置:
- magic init 创建 runner.config.js
- 配置 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命令集
命令 | 说明 | 参数 |
---|---|---|
pub | 发布react,原生组件到Npm,magic,gitLab,默认增加预发版本号 | -m :git提交日志,-wx:推送微信,-up:版本变更 |
latest | 去掉预发号,同步到npm与git仓库(无预发号的包不会变更),微信推送 | -m :git提交日志,-wx:推送微信 |
publish | 对于node,vue包,发布由magic创建的包到magic,gitLab | -m :git提交日志 |
runner.config.js
参数 | 必传 | 类型 | 说明 | 默认值 |
---|---|---|---|---|
base | string | 子应用 base 路径 | package.json 中的 name 字段的值 | |
outputPath | string | 打包预览平台子系统时的输出文件目录 | './libDist' | |
themeConfig | Object | 预览平台系统配置 | {} | |
themeConfig.root | string | 自动扫描路径配置 | './src/components' | |
themeConfig.navs | Array | 如下,一般无需修改会根据 mdx 文件位置自动扫描 | ||
webpackConfig | * | function | 可拦载 webpack, 配置 alias、proxy,返回新的 config | |
wx | Array | 微信推送,详见下 |
navs
mdx 文件目录下有 index.(js|jsx|tx|txs)时无需配置
参数 | 必传 | 类型 | 说明 | 默认值 |
---|---|---|---|---|
path | string | 路由地址 | 当前 mdx 文件的父级目录名称 | |
title | string | 组件名称(显示在子系统左则菜单中) | 当前 mdx 文件的父级目录名称 | |
mdx | * | string | md 或 mdx 文件存放路径(相对于 themeConfig.root 的路径) | |
compontent | string | 此文件对应的组件路径(相对于 themeConfig.root 的路径),用于 npm 打包时组件取到组件列表 | 不传,默认从 mdx 文件的当前目录中去找 index.(ts、js、jsx、tsx)文件 | |
mock | string | mock 文件地址,基于 themeConfig.root 的相对地址 | 不传,默认从 mdx 文件的当前目录中去找 mock.(js、ts) |
wx
项目单组件不需配置 多组件需要选择你想推送的的组件
参数 | 必传 | 类型 | 说明 | 默认值 |
---|---|---|---|---|
url | * | string | 预览文档路径,作为唯一识别号用,必填 | |
pkg | string | 需要推送的组件名称 | packageJson.name | |
version | string | packageJson.version | ||
author | string | packageJson.author | ||
wxmsg | md | 可以使用md写法 | 命令行写的推送-wx或者Git提交信息-m |
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'
}]