Teachable Machine Boilerplate 项目教程

Teachable Machine Boilerplate 项目教程

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

teachable-machine-boilerplate/
├── assets/
│   ├── models/
│   ├── sounds/
│   └── styles/
├── node_modules/
├── src/
│   ├── js/
│   ├── style/
│   └── index.html
├── .gitignore
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js

• assets/: 存放项目所需的静态资源文件，包括模型文件、声音文件和样式文件。
  • models/: 存放训练好的模型文件。
  • sounds/: 存放项目中使用的声音文件。
  • styles/: 存放样式文件。
• node_modules/: 存放项目依赖的Node.js模块。
• src/: 存放项目的源代码文件。
  • js/: 存放JavaScript脚本文件。
  • style/: 存放CSS样式文件。
  • index.html: 项目的主HTML文件。
• .gitignore: 指定Git版本控制系统忽略的文件和目录。
• LICENSE: 项目的开源许可证文件。
• README.md: 项目的说明文档。
• package.json: 项目的Node.js配置文件，包含项目的依赖和脚本。
• webpack.config.js: Webpack的配置文件，用于打包和构建项目。

2. 项目的启动文件介绍

项目的启动文件是 src/index.html。这个文件是项目的主入口，包含了HTML结构和基本的页面布局。启动项目时，浏览器会加载这个文件，并执行其中的JavaScript脚本。

3. 项目的配置文件介绍

• package.json: 这个文件包含了项目的元数据和依赖信息。它定义了项目的名称、版本、描述、作者、许可证等信息，还列出了项目所需的Node.js模块。此外，package.json 还包含了项目的脚本命令，例如 npm start 用于启动项目。

• webpack.config.js: 这个文件是Webpack的配置文件，用于定义项目的打包和构建规则。它指定了入口文件、输出目录、模块解析规则、插件配置等。通过这个文件，Webpack可以将项目的源代码打包成最终的静态资源文件。