WebDash 项目使用教程

2025-04-21 17:34:53作者：明树来

1. 项目目录结构及介绍

WebDash 是一个基于 WebAssembly 的 Plotly Dash 分布版，能够在浏览器中运行。项目的主要目录结构如下：

src/
- 存放项目的源代码，包括 TypeScript 和 JavaScript 文件。
- dash_apps/：包含 Dash 应用的 TypeScript 文件。
- index.html：项目的入口 HTML 文件。
.babelrc
- Babel 配置文件，用于指定 Babel 转译器的选项。
.gitignore
- 指定 Git 忽略的文件和目录。
CONTRIBUTING.md
- 贡献指南，介绍了如何为项目贡献代码。
LICENSE
- 项目使用的许可证文件，本项目采用 BSD-3-Clause 许可。
Makefile
- Makefile 文件，用于定义构建和部署项目的任务。
README.md
- 项目自述文件，包含了项目的介绍、使用方法和贡献指南。
package-lock.json
- 包锁定文件，确保安装的依赖与开发者的环境一致。
package.json
- 包管理文件，定义了项目的依赖、脚本和元数据。
webdash.gif
- 项目 GIF 演示图。

2. 项目的启动文件介绍

项目的启动主要通过 src/index.html 文件进行。这个文件定义了网页的基本结构和加载 WebDash 应用的脚本。以下是一些关键部分：

<head> 区域包含了加载 CSS 样式表的链接和定义页面元数据的标签。
<body> 区域包含了加载 WebAssembly 模块和启动 Python 核心的脚本。
<script> 标签用于加载 pyodide 和启动 WebDash 应用。

<!-- 示例：index.html 中的部分内容 -->
<script type="text/javascript">
  // 加载 pyodide
  loadPyodide({
    indexURL: "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/"
  }).then(() => {
    // 初始化并加载 WebDash 应用
    initWebDash();
  });
</script>

3. 项目的配置文件介绍

本项目的主要配置文件是 .babelrc 和 package.json。

.babelrc 文件用于配置 Babel 转译器的行为，例如指定预设和插件。
```
{
  "presets": ["@babel/preset-env"]
}
```
package.json 文件包含了项目的依赖、脚本和元数据。以下是一些重要的字段：
- name：项目的名称。
- version：项目的版本号。
- description：项目的简短描述。
- scripts：定义了运行项目所需的命令，例如 start 和 build。
- dependencies：项目的依赖列表。
- devDependencies：开发环境中的依赖列表。
```
{
  "name": "webdash",
  "version": "0.0.1",
  "scripts": {
    "start": "node server.js",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "plotly.js": "^1.58.4"
  },
  "devDependencies": {
    "webpack": "^4.44.2"
  }
}
```