Priceline Design System 开源项目教程

Priceline Design System 开源项目教程

design-system Priceline.com Design System 项目地址: https://gitcode.com/gh_mirrors/desig/design-system

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

Priceline Design System 项目的目录结构如下：

design-system/
├── .github/
│   └── workflows/
├── docs/
├── packages/
│   ├── core/
│   ├── icons/
│   ├── tokens/
│   └── utils/
├── scripts/
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── lerna.json
├── package.json
├── README.md
└── tsconfig.json

目录结构介绍：

• .github/workflows/: 存放 GitHub Actions 的工作流配置文件。
• docs/: 存放项目的文档文件。
• packages/: 包含项目的核心包、图标包、设计令牌包和工具包。
  • core/: 核心组件和样式。
  • icons/: 图标库。
  • tokens/: 设计令牌，如颜色、字体等。
  • utils/: 工具函数和辅助库。
• scripts/: 存放项目的脚本文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• lerna.json: Lerna 多包管理工具配置。
• package.json: 项目的 npm 配置文件。
• README.md: 项目介绍和使用说明。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

Priceline Design System 项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些关键的启动命令：

{
  "scripts": {
    "start": "lerna run start --parallel",
    "build": "lerna run build",
    "test": "lerna run test",
    "lint": "lerna run lint"
  }
}

启动命令介绍：

• start: 启动所有包的开发服务器，使用 lerna run start --parallel 命令并行运行。
• build: 构建所有包的发布版本，使用 lerna run build 命令。
• test: 运行所有包的测试，使用 lerna run test 命令。
• lint: 运行代码检查，使用 lerna run lint 命令。

3. 项目的配置文件介绍

3.1 .eslintrc.js

ESLint 配置文件，用于定义代码风格和检查规则。

module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  rules: {
    // 自定义规则
  }
};

3.2 .prettierrc

Prettier 配置文件，用于代码格式化。

{
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}

3.3 lerna.json

Lerna 配置文件，用于管理多包项目。

{
  "packages": ["packages/*"],
  "version": "independent"
}

3.4 tsconfig.json

TypeScript 配置文件，用于定义 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

通过以上配置文件，可以确保项目的代码风格一致性、构建和测试的自动化，以及 TypeScript 的正确编译。

design-system Priceline.com Design System 项目地址: https://gitcode.com/gh_mirrors/desig/design-system