Tango Components 开源项目教程

1. 项目的目录结构及介绍

Tango Components 是一个用于 Tango LowCode Builder 的 React 组件库。项目的目录结构如下：

tango-components/
├── packages/
│   ├── gitignore
│   ├── prettierrc
│   ├── LICENSE
│   ├── README.md
│   ├── babel.config.js
│   ├── eslint.config.js
│   ├── jest.config.js
│   ├── lerna.json
│   ├── package.json
│   ├── tsconfig.json
│   ├── tsconfig.prod.json
│   └── yarn.lock
├── README.md
├── LICENSE
└── package.json

目录结构介绍

• packages/: 包含所有组件和文档的子包。
• README.md: 项目的主 README 文件。
• LICENSE: 项目的许可证文件。
• package.json: 项目的主配置文件。

2. 项目的启动文件介绍

项目的启动文件主要在 package.json 中定义。以下是一些关键的启动脚本：

"scripts": {
  "start": "yarn workspace docs storybook",
  "build": "lerna run build",
  "serve": "yarn workspace @music163/antd serve",
  "serve:mail": "yarn workspace @music163/tango-mail serve",
  "test": "jest",
  "test:watch": "jest --watch",
  "eslint": "eslint packages/**/src/* [ts tsx]",
  "publish": "lerna publish",
  "ver": "lerna version --no-private",
  "release": "yarn eslint && yarn build && yarn run ver && lerna publish from-git",
  "release:beta": "yarn eslint && yarn build && yarn run ver && lerna publish from-package --dist-tag beta",
  "up": "yarn upgrade-interactive --latest"
}

启动文件介绍

• start: 启动 Storybook 以预览组件。
• build: 构建所有包。
• serve: 启动 @music163/antd 服务。
• serve:mail: 启动 @music163/tango-mail 服务。
• test: 运行测试。
• eslint: 运行 ESLint 检查。
• publish: 发布包。

3. 项目的配置文件介绍

项目的配置文件主要包括以下几个：

• babel.config.js: Babel 配置文件。
• eslint.config.js: ESLint 配置文件。
• jest.config.js: Jest 配置文件。
• lerna.json: Lerna 配置文件。
• tsconfig.json: TypeScript 配置文件。
• tsconfig.prod.json: 生产环境的 TypeScript 配置文件。

配置文件介绍

• babel.config.js: 配置 Babel 转译器，用于将现代 JavaScript 代码转换为向后兼容的版本。
• eslint.config.js: 配置 ESLint，用于检查和规范代码风格。
• jest.config.js: 配置 Jest，用于运行单元测试。
• lerna.json: 配置 Lerna，用于管理多包仓库。
• tsconfig.json: 配置 TypeScript 编译选项。
• tsconfig.prod.json: 配置生产环境的 TypeScript 编译选项。

以上是 Tango Components 开源项目的目录结构、启动文件和配置文件的详细介绍。希望这份教程能帮助你更好地理解和使用该项目。