p5-typescript-starter 项目教程

p5-typescript-starter 项目教程

p5-typescript-starterBase starter project using p5js and typescript 项目地址:https://gitcode.com/gh_mirrors/p5/p5-typescript-starter

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

p5-typescript-starter/
├── build/
│   └── ...
├── src/
│   ├── sketch.ts
│   └── ...
├── .gitignore
├── LICENSE
├── README.md
├── global.d.ts
├── index.html
├── package-lock.json
├── package.json
└── tsconfig.json

• build/: 编译后的文件存放目录。
• src/: 源代码目录，包含主要的 TypeScript 文件。
• src/sketch.ts: 项目的主逻辑文件。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• global.d.ts: 全局类型定义文件。
• index.html: 项目的主 HTML 文件。
• package-lock.json: npm 依赖锁定文件。
• package.json: 项目依赖和脚本配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的主要启动文件是 src/sketch.ts。这个文件包含了 p5.js 的主要逻辑代码。通过编译和运行这个文件，可以在浏览器中看到 p5.js 的绘图效果。

3. 项目的配置文件介绍

• package.json: 包含了项目的依赖、脚本和其他元数据。例如：

  {
    "name": "p5-typescript-starter",
    "version": "1.0.0",
    "scripts": {
      "start": "npm run build && npm run serve",
      "build": "tsc",
      "serve": "http-server build"
    },
    "dependencies": {
      "p5": "^1.0.0",
      "typescript": "^4.0.0"
    }
  }
  

• tsconfig.json: TypeScript 编译配置文件，定义了编译选项和文件包含规则。例如：

  {
    "compilerOptions": {
      "outDir": "./build",
      "module": "commonjs",
      "target": "es5",
      "lib": ["dom", "es2015"],
      "sourceMap": true,
      "strict": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
      "strictFunctionTypes": true,
      "strictPropertyInitialization": true,
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "esModuleInterop": true
    },
    "include": ["src/**/*"]
  }
  

通过这些配置文件，可以确保项目正确编译和运行。

p5-typescript-starterBase starter project using p5js and typescript 项目地址:https://gitcode.com/gh_mirrors/p5/p5-typescript-starter