MD Video 项目使用教程

1. 项目目录结构及介绍

MD Video 项目是一个基于 Electron 的桌面应用程序，用于将 Markdown 文档转换为视频。以下是项目的目录结构及其介绍：

mdvideo/
├── build/                       # 构建目录
├── demo/                        # 演示相关文件
├── docs/                        # 文档目录
├── patches/                     # 补丁目录
├── resources/                   # 资源目录，包含ffmpeg等
├── src/                         # 源代码目录
│   ├── main/                    # 主程序代码
│   ├── renderer/                # 渲染进程代码
│   └── common/                  # 公共代码
├── .editorconfig                 # 编辑器配置文件
├── .eslintignore                # ESLint 忽略文件
├── .eslintrc.cjs                # ESLint 配置文件
├── .gitattributes                # Git 属性文件
├── .gitignore                   # Git 忽略文件
├── .prettierignore              # Prettier 忽略文件
├── .prettierrc.yaml             # Prettier 配置文件
├── LICENSE                      # 许可证文件
├── README.md                    # 项目说明文件
├── dev-app-update.yml           # 开发环境应用更新配置
├── electron-builder.yml         # Electron Builder 配置
├── electron.vite.config.ts      # Electron Vite 配置
├── package.json                 # 项目依赖及配置
├── publish.js                   # 发布脚本
└── tsconfig*.json               # TypeScript 配置文件

2. 项目的启动文件介绍

项目的启动文件位于 src/main/index.ts，这是 Electron 主进程的入口点。以下是启动文件的主要内容：

// 引入必要的模块和库
import { app, BrowserWindow } from 'electron';
import path from 'path';

// 创建一个新的浏览器窗口
function createWindow() {
  // 创建一个浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  // 加载应用的 index.html
  win.loadFile(path.join(__dirname, 'renderer/index.html'));

  // 当窗口关闭时的操作
  win.on('closed', () => {
    win = null;
  });
}

// 当 Electron 完成初始化并准备创建浏览器窗口时，调用此方法
app.on('ready', createWindow);

// 所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在 macOS 上，当点击 dock 图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 electron-builder.yml。

• package.json：定义了项目的依赖、脚本和元数据。其中包括了项目的入口点、启动脚本等。

{
  "name": "mdvideo",
  "version": "1.0.0",
  "main": "src/main/index.ts",
  "scripts": {
    "start": "electron .",
    "rebuild": "electron-rebuild --type=prod --module-dir=src/main -- Corbyn",
    "pack": "electron-packager . --overwrite --asar --platform=win32 --arch=x64 --icon=assets/icon.ico --prune=true --out=release-builds"
  },
  "devDependencies": {
    "electron": "^7.3.3",
    "electron-rebuild": "^1.11.0"
  }
}

• electron-builder.yml：用于配置 Electron Builder 打包应用的选项，如输出目录、图标、版本等。

appId: "com.example.mdvideo"
outputs: ["release-builds"]
win: {
  target: "nsis",
  icon: "assets/icon.ico"
}

以上是 MD Video 项目的目录结构、启动文件和配置文件的介绍。按照这些说明，用户可以更好地理解项目结构并进行相应的开发和配置。