Progressive-Blur 项目启动与配置教程

1. 项目目录结构及介绍

Progressive-Blur 项目是一个为 React 提供渐进式背景模糊效果的开源库。以下是项目的目录结构及其简要介绍：

progressive-blur/
├── lib/                       # 存放编译后的库文件
├── public/                    # 公共文件，如网页图标等
├── src/                       # 源代码目录
│   ├── components/            # React 组件
│   ├── styles/                # 样式文件
│   ├── utils/                 # 工具函数
│   ├── App.tsx                # 应用入口组件
│   └── index.ts               # 导出组件
├── .eslintrc.cjs              # ESLint 配置文件
├── .gitignore                 # Git 忽略文件
├── .yarnrc.yml                # Yarn 配置文件
├── LICENSE                    # 开源协议文件
├── README.md                  # 项目说明文件
├── index.html                 # 网页入口文件
├── package.json               # 项目依赖及脚本
├── tsconfig.json              # TypeScript 配置文件
├── tsconfig.node.json         # TypeScript 节点配置文件
├── tsup.config.ts             # Tsup 打包配置文件
└── vite.config.ts             # Vite 配置文件

2. 项目的启动文件介绍

项目的启动主要通过 index.html 和 App.tsx 文件进行。

• index.html 是网页的入口文件，它包含了加载 React 应用所需的脚本和链接。

• App.tsx 是 React 应用的主组件，它负责渲染所有其他的子组件，并且是使用 ProgressiveBlur 组件的示例。

启动项目前，需要确保已经安装了所有依赖项。可以通过以下命令安装：

yarn install

然后，使用以下命令启动开发服务器：

yarn dev

3. 项目的配置文件介绍

项目中包含了一些配置文件，用于定义项目的构建过程和代码质量标准。

• .eslintrc.cjs：ESLint 配置文件，用于定义代码风格和语法规则，确保代码质量。

• tsconfig.json：TypeScript 配置文件，定义了项目的类型检查和编译选项。

• tsconfig.node.json：TypeScript 节点配置文件，特定于 Node.js 环境的类型检查和编译选项。

• tsup.config.ts：Tsup 打包配置文件，用于配置如何打包 TypeScript 代码。

• vite.config.ts：Vite 配置文件，用于配置开发服务器和构建过程。

通过修改这些配置文件，可以定制化项目的开发环境和构建输出。