FCL

Appearance

快速开始 ​

如何向FCL贡献代码

克隆代码 ​

从 gitlab repo 获取源代码

shell
git clone http://xxxx/soft_group/yingmai/fe_group/fcl

安装依赖

shell
pnpm i

初始化项目 ​

在 packages 下新建组件目录，也可以拷贝相似组件新建项目

目录名可以与npm包名有差异

目录文件说明 ​

  • src - 源代码目录

  • eslint.config.js - eslint v9 配置文件

  • package.json - npm元数据文件

  • README.md - 项目文档。生成组件文档时使用

  • tsconfig.json - typescript配置文件

  • tsdown.config.ts - tsdown配置文件，可选

请参考 @falconix/configs 选择相应的配置文件进行配置

项目信息 ​

在package.json中修改项目基本信息

json
{
  "name": "@falconix/upload-center",
  "type": "module",
  "version": "0.0.0",
  "description": "falconix upload-center"
}

命令 ​

在package.json中，按照项目情况，添加如下四个命令

json
{
  "scripts": {
    "dev": "...",
    "build": "...",
    "typecheck": "...",
    "lint": "..."
  }
}

安装项目依赖 ​

在FCL根目录运行命令，添加项目需要的依赖项

shell
pnpm --filter @falconix/upload-center i ...

如果引用的是FCL项目内的组件，请使用工作空间协议进行引用

shell
pnpm --filter @falconix/upload-center i @falconix/configs@workspace:^ -D

对于项目外的依赖，FCL项目 使用catalog:管理项目整体依赖版本，请不要手动指定

在 docs 项目内添加新建组件的依赖，用于书写文档的demo

shell
pnpm --filter docs i @falconix/upload-center@workspace:^ -D

开发 ​

在FCL根目录运行dev命令，开始开发

shell
pnpm dev

单独运行包内命令

shell
pnpm --filter @falconix/upload-center lint
// or
pnpm -C packages/uplodaer-center typcheck

docs ​

打开 docs 文档站

找到组件的文档地址进行编写

在 docs/src/demos 内添加组件demo，开发 & 调试组件

例：新建文件 docs/src/demos/uploader-center.vue

在项目的 README.md 内引用 demo 组件：

markdown
<demo vue="uploader-center.vue" />

play ​

如果需要完全纯粹的调试环境，请使用 play 项目

在 play/src/pages 内新建vue文件用于调试组件

shell
pnpm play
// and
pnpm --filter @falconix/upload-center dev

代码规范 ​

git commit message 参考 约定式提交规范

eslint和代码格式化 参考 @antfu/eslint-config，详情，详情

tsconfig 参考 @vue/tsconfig

版本控制 参考 语义化版本

Check ​

在FCL根目录运行 lint & typecheck 命令，进行代码检查

shell
pnpm lint && pnpm typecheck

构建 ​

在FCL根目录运行build命令，进行构建

shell
pnpm build

发布版本 ​

生成版本升级文件 ​

确保组件代码修改完成，运行命令：

shell
pnpm changeset

选择需要升级版本的包，添加发版说明

命令完成之后，会在.changeset目录下生成升级文件

  • 请在git提交当中包含此代码文件，否则构建会失败
  • 只能通过changeset升级版本号，而不要手动修改版本号
  • 升级必须升级版本号，而不能同名覆盖
  • 请遵守 语义化版本 的规范升级项目版本
  • 禁止不符合语义的升级
  • 尽量避免不兼容升级

merge request ​

在 merge request 中，创建 merge request

选择需要合并到main的开发分支

merge request 创建成功后，流水线开启 lint、typecheck 等任务对代码进行检查

通知其他贡献人review代码，通过然后点击 Merge

代码合并到main分支，并开启CI 流水线

发布完成 ​

通过 pipelines 查看构建状态

成功之后：

  • 新版本会推送到私有npm
  • 合并 修改的代码 到main分支
  • 更新文档(FCL docs)