SplootCode 项目启动与配置教程

1. 项目目录结构及介绍

SplootCode 是一个旨在降低编程入门难度的编码环境。项目的目录结构如下：

• .github/
  • 存放 GitHub 工作流文件，用于自动化处理如代码审查、构建等任务。
• .vscode/
  • 包含 Visual Studio Code 的配置文件。
• packages/
  • 存放项目依赖的各个包。
• public/
  • 存放静态文件，如图片、样式表等。
• python/
  • 包含 Python 相关的代码和依赖设置。
• scripts/
  • 存放项目脚本，用于执行特定的任务。
• src-runtime/
  • 包含运行时环境的源代码。
• src/
  • 包含项目的核心源代码。
• .env.development
  • 包含开发环境的环境变量设置。
• .eslintignore
  • 指定 ESLint 忽略的文件和目录。
• .eslintrc.json
  • ESLint 的配置文件。
• .gitignore
  • 指定 Git 忽略的文件和目录。
• .prettierrc.json
  • Prettier 的配置文件，用于代码格式化。
• LICENSE
  • 项目的许可证文件。
• README.md
  • 项目的说明文档。
• babel.config.json
  • Babel 的配置文件，用于 JavaScript 代码转换。
• index.html
  • 项目的主页 HTML 文件。
• jest.config.ts
  • Jest 的配置文件，用于 JavaScript 代码测试。
• package.json
  • Node.js 项目配置文件，定义项目依赖、脚本等。
• reactpreview.config.js
  • React 预览的配置文件。
• tsconfig.json
  • TypeScript 的配置文件。
• vite.config.ts
  • Vite 的配置文件，用于配置 Web 应用构建。

2. 项目的启动文件介绍

项目的启动主要通过 package.json 中的脚本实现。以下是一些主要的启动脚本：

• yarn install
  • 安装项目依赖。
• yarn generate-types
  • 生成内置变量和函数的类型信息。
• yarn build:packages
  • 构建项目中的 Yarn 工作空间包。
• yarn start
  • 启动主编辑器服务。
• yarn start-frame
  • 启动运行时 iframe 服务。

在开发环境下，通常需要打开两个终端，一个运行 yarn start，另一个运行 yarn start-frame。这样，主编辑器将在 http://localhost:3000 上可用，而运行时 iframe 将从 http://localhost:3001 加载。

3. 项目的配置文件介绍

项目中的配置文件主要用于设置开发环境和代码风格。

• .env.development
  • 设置开发环境的环境变量，如服务器端口等。
• .eslintrc.json
  • 配置 ESLint 规则，用于保持代码风格的一致性。
• .prettierrc.json
  • 配置 Prettier 规则，用于代码格式化。
• package.json
  • 中的 scripts 部分，定义了项目的各种脚本任务，包括启动、构建和测试等。

确保在开始开发前，正确配置这些文件，以保障开发过程的顺利进行。