🛠 组件开发文档

🔗 参考文档

• 组件开发指南
• 菜鸟前后端数据规约和二方包
• StoryBook 组件文档编写文档

📔 组件目录

src
├── components // 组件文件夹
│   ├── cn-new-button
│   │   ├── index.ts # 单组件入口文件（默认）
│   │   ├── index-onecode-m.ts # 用于覆盖H5端展示，一般场景无须使用，双端差异化开发需要
│   │   ├── types // 组件类型件夹（如有）
│   │   │   ├── cn-new-button.ts
│   │   │   └── index.ts
│   │   └── view // 组件源码文件夹（如有）
│   │       ├── cn-new-button.scss
│   │       ├── cn-new-button.tsx
│   │       └── index.ts
│   └── index.ts // 组件入口文件夹（export所有组件）
├── locales // 组件国际化多语言文件夹（如有）
├── lowcode // 低码组件配置文件夹
├── plugins // 插件文件夹
├── stories // 组件文档文件夹
├── styles // 公共样式文件夹
├── tests // 单元测试文件夹
├── types // 公共类型定义文件夹
└── utils // 公共工具类文件夹

✨ 组件特性

• 依赖菜鸟统一工程 [email protected]
• 依赖组件库 @cainiaofe/[email protected]
• 符合菜鸟组件官方规范的业务组件大包，包含源码组件、低码组件、插件;
• 稳定性
  • ✅ TypeScript 语法
  • ✅ 单测覆盖
• 高级功能
  • ✅ CSS Token
  • ✅ panda 国际化
  • ✅ 一码多端
  • ✅ 低代码组件
  • ✅ 插件开发

💻 组件兼容性

参考 CNUI 浏览器兼容范围详细说明

🔨 组件开发

• 安装 cone-cli ｜ Cone-CLI 使用指引
  • tnpm i -g @alife/cone-cli@latest
• 拉取代码
  • git clone [email protected]:cn-ui/cn-domain-popup.git
• 安装依赖包
  • cone install
• 启动一码多端研发 (storybook 文档) & 实时构建（用于代理研发）
  • cone start
• 新增组件(插件)
  • cone add
• 提交代码
  • git add | git commit | git push
• 打包构建
  • cone build
• 创建新迭代 ｜ x.y.z 语义化版本控制规范
  • cone create i

    PS: 创建迭代默认会从当前分支拉取新分支

• 国际化｜ 国际化多语言使用指引
  • cone i18n

工具库 推荐使用 @cainiaofe/cn-utils

@cainiaofe/cn-utils 文档请查阅：https://cone.cainiao-inc.com/dsm/v3/@ali/cn-utils/overview?version=0.2.7

使用参考

import { urlParse } from '@cainiaofe/cn-utils';

📦 组件发布

• 日常发布

  • cone pub -d

    PS: 如发布前未绑定需求，则有提示要求绑定需求按提示操作即可

• 线上发布

  • cone pub -p

✈️ 组件消费

【推荐】使用苏铁·低码平台消费组件。 【必须】V3 工程组件默认支持一码多端能力，构建产物为 UMD 资源（不支持 esm、cjs），请通过浏览器直接引用 CDN 资源方式消费。 > 【禁止】请勿直接通过 tnpm install 使用本组件，会导致一码多端失效等其他副作用。

组件消费详细文档请在组件发布后 DSM 平台查看

常见问题

• 启动 https 证书 报错

1. 默认情况下，启动后需要手动信任 https://localhost:9912 和 https://localhost:9911 才能访问到组件构建的资源
2. 启动前通过 trusted-cert 自动生成了可信证书，如果碰到问题，可以通过以下方式重新生成 https://anpm.alibaba-inc.com/package/trusted-cert

# 删除本地已生成的密钥和证书，重新启动
npx trusted-cert uninstall

# 如果install过程中三次输入密码都错误了，还可以单独运行这个命令重新添加到系统钥匙串
npx trusted-cert trust

其他问题请查阅 https://alidocs.dingtalk.com/i/nodes/o14dA3GK8gQlkoYwc0eDzzZBV9ekBD76?utm_scene=team_space