Pigment 开源项目使用教程

Pigment 开源项目使用教程

pigment An open source design system for building SolidJS application. 项目地址: https://gitcode.com/gh_mirrors/pi/pigment

1. 项目目录结构及介绍

Pigment 项目的目录结构如下：

pigment/
├── apps/
├── packages/
├── .editorconfig
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── .npmrc
├── .prettierrc.json
├── LICENSE.md
├── README.md
├── commitlint.config.js
├── netlify.toml
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.eslint.json
├── tsconfig.json
└── turbo.json

目录结构介绍

• apps/: 存放应用程序的目录。
• packages/: 存放项目依赖包的目录。
• .editorconfig: 编辑器配置文件，用于统一代码风格。
• .eslintignore: ESLint 忽略文件列表。
• .eslintrc.json: ESLint 配置文件。
• .gitignore: Git 忽略文件列表。
• .npmrc: npm 配置文件。
• .prettierrc.json: Prettier 代码格式化配置文件。
• LICENSE.md: 项目许可证文件。
• README.md: 项目说明文件。
• commitlint.config.js: commitlint 配置文件，用于规范 Git 提交信息。
• netlify.toml: Netlify 配置文件，用于部署配置。
• package.json: 项目依赖和脚本配置文件。
• pnpm-lock.yaml: pnpm 锁定文件，用于版本控制。
• pnpm-workspace.yaml: pnpm 工作区配置文件。
• tsconfig.eslint.json: TypeScript ESLint 配置文件。
• tsconfig.json: TypeScript 配置文件。
• turbo.json: Turbo 配置文件，用于任务调度。

2. 项目启动文件介绍

Pigment 项目的启动文件主要依赖于 package.json 中的脚本配置。以下是一些常用的启动命令：

• 开发环境启动:

  npm run dev
  

  该命令会启动开发服务器，监听文件变化并自动重新加载。

• 生产环境启动:

  npm run build
  npm start
  

  首先运行 build 命令构建生产环境代码，然后运行 start 命令启动生产服务器。

3. 项目配置文件介绍

3.1 .eslintrc.json

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

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "indent": ["error", 2]
  }
}

3.2 tsconfig.json

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

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3.3 turbo.json

Turbo 配置文件，用于定义任务调度和并行执行：

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": []
    }
  }
}

通过以上配置文件，可以确保项目在开发和生产环境中的一致性和高效性。

pigment An open source design system for building SolidJS application. 项目地址: https://gitcode.com/gh_mirrors/pi/pigment