React Lightning Design System 项目启动与配置教程

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

React Lightning Design System 是一个开源项目，它基于 React 组件库，旨在提供一个与 Salesforce Lightning Design System 兼容的 UI 组件库。以下是项目的目录结构及简要介绍：

react-lightning-design-system/
├── .circleci/              # CircleCI 持续集成配置文件
├── .eslintrc.js            # ESLint 配置文件
├── .gitignore              # Git 忽略文件
├── .prettierrc             # Prettier 代码风格配置文件
├── .travis.yml             # Travis CI 配置文件
├── CHANGELOG.md            # 项目更新日志
├── CODE_OF_CONDUCT.md      # 项目行为准则
├── CONTRIBUTING.md         # 贡献指南
├── LICENSE                 # 项目许可证
├── README.md               # 项目说明文件
├── TypeScript/
│   ├── __tests__/          # TypeScript 测试文件
│   ├── components/         # React 组件目录
│   ├── hooks/              # 自定义钩子目录
│   ├── index.ts            # 入口文件
│   └── utils/              # 工具函数目录
├── demos/                  # 示例代码和页面
├── dist/                   # 构建输出目录
├── package.json            # 项目依赖和脚本
├── scripts/                # 自定义脚本
└── yarn.lock               # Yarn 依赖锁定文件

• .circleci/：包含持续集成服务 CircleCI 的配置文件。
• .eslintrc.js：用于配置 ESLint，以确保代码质量。
• .gitignore：定义了 Git 应该忽略的文件和目录。
• .prettierrc：用于配置 Prettier，统一代码风格。
• .travis.yml：Travis CI 的配置文件，用于自动化测试和部署。
• CHANGELOG.md：记录了项目的所有更新和改动。
• CODE_OF_CONDUCT.md：定义了项目参与者的行为准则。
• CONTRIBUTING.md：提供了贡献代码的指南。
• LICENSE：项目使用的许可证。
• README.md：项目的说明文件，包含项目信息、安装步骤和使用方法。
• TypeScript/：包含了 TypeScript 相关的代码。
• demos/：包含了项目的示例代码和页面。
• dist/：构建后的文件输出目录。
• package.json：定义了项目的依赖、脚本和元数据。
• scripts/：包含了自定义的脚本文件。

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中的脚本实现。以下是几个关键的启动脚本：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  ...
}

• start：启动开发服务器，通常用于本地开发。它通过 react-scripts start 脚本启动。
• build：构建应用的生产版本，通过 react-scripts build 脚本实现。
• test：运行测试，通过 react-scripts test 脚本执行。

要在本地启动项目，可以在项目目录下运行以下命令：

npm start

这将会启动一个开发服务器，并在默认的网络浏览器中打开一个新标签页，通常地址是 http://localhost:3000。

3. 项目的配置文件介绍

项目的配置主要通过以下几个文件进行：

• .eslintrc.js：ESLint 配置文件，用于定义代码检查规则。
• .prettierrc：Prettier 配置文件，用于统一代码风格。
• package.json：包含了项目的脚本和依赖配置。

package.json 文件中的 dependencies 部分定义了项目依赖的库和模块，而 scripts 部分则定义了可以运行的脚本命令，如启动开发服务器、构建项目或运行测试。

对于高级配置，如需要自定义 webpack 配置，通常需要修改 react-scripts 的配置，这通常涉及到创建一个 config-overrides.js 文件，或者在 react-app-rewired 的帮助下进行配置。

请确保在修改任何配置文件前，已经充分理解了其原有的设置和目的，以避免不必要的错误。