Spark Design System 使用教程

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

Spark Design System 是一个用于设计和构建统一数字体验的开源项目，主要用于 Rocket Mortgage 家族的金融科技产品。项目的目录结构如下：

spark-design-system/
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── package.json
├── package-lock.json
├── src/
│   ├── js/
│   │   ├── spark.js
│   │   └── ...
│   ├── scss/
│   │   ├── spark.scss
│   │   └── ...
│   └── ...
├── dist/
│   ├── spark.css
│   ├── spark.js
│   └── ...
└── ...

目录结构介绍

• CODE_OF_CONDUCT.md: 项目的行为准则文件。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的介绍和使用说明文件。
• package.json: 项目的 npm 配置文件，包含项目的依赖和脚本。
• package-lock.json: 锁定项目依赖版本的文件。
• src/: 项目的源代码目录，包含 JavaScript 和 Sass 文件。
  • js/: 包含项目的 JavaScript 文件。
  • scss/: 包含项目的 Sass 文件。
• dist/: 项目的构建输出目录，包含编译后的 CSS 和 JavaScript 文件。

2. 项目的启动文件介绍

Spark Design System 的启动文件主要包括以下几个部分：

2.1 Sass 文件

在项目的 src/scss/ 目录下，主要的 Sass 文件是 spark.scss。这个文件负责引入所有的 Spark 样式，并将其编译成 CSS 文件。

@import "node_modules/@sparkdesignsystem/spark-styles/spark.scss";

2.2 JavaScript 文件

在项目的 src/js/ 目录下，主要的 JavaScript 文件是 spark.js。这个文件负责引入所有的 Spark JavaScript 功能。

import spark from "node_modules/@sparkdesignsystem/spark/spark";

3. 项目的配置文件介绍

3.1 package.json

package.json 文件是 npm 项目的配置文件，包含项目的元数据、依赖和脚本。以下是一些关键配置：

{
  "name": "spark-design-system",
  "version": "1.0.0",
  "description": "Spark Design System",
  "main": "dist/spark.js",
  "scripts": {
    "build": "npm run build:css && npm run build:js",
    "build:css": "sass src/scss/spark.scss dist/spark.css",
    "build:js": "babel src/js --out-dir dist/js"
  },
  "dependencies": {
    "@sparkdesignsystem/spark": "^1.0.0"
  },
  "devDependencies": {
    "sass": "^1.32.0",
    "babel-cli": "^6.26.0"
  }
}

3.2 package-lock.json

package-lock.json 文件用于锁定项目依赖的版本，确保在不同环境下安装的依赖版本一致。

3.3 .eslintrc

.eslintrc 文件用于配置 ESLint，确保 JavaScript 代码遵循一致的编码规范。

{
  "extends": "airbnb",
  "rules": {
    "indent": ["error", 2]
  }
}

3.4 .stylelintrc

.stylelintrc 文件用于配置 Stylelint，确保 Sass 代码遵循一致的编码规范。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2
  }
}

通过以上配置文件，可以确保 Spark Design System 在不同环境下的一致性和可维护性。