Hundred 项目使用与配置指南

Hundred 项目使用与配置指南

hundred Build your own mini Million.js 项目地址: https://gitcode.com/gh_mirrors/hu/hundred

1. 项目目录结构及介绍

Hundred 项目是一个基于 Million.js 的玩具级虚拟 DOM 实现。项目的目录结构如下所示：

hundred/
├── .github/
│   └── workflows/
│       └── node.js.yml
├── src/
│   ├── index.ts
│   ├── render.ts
│   └── block.ts
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

• .github/workflows/: 存放 GitHub Actions 工作流文件，用于自动化测试、构建等任务。
• src/: 源代码目录，包含项目的核心实现。
  • index.ts: 项目入口文件。
  • render.ts: 实现 render 函数，负责将虚拟 DOM 转换为真实 DOM。
  • block.ts: 实现 block 函数，用于创建虚拟 DOM 的占位符。
• .gitignore: 指定 Git 忽略的文件和目录。
• .npmignore: 指定 npm 发布时忽略的文件和目录。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• package.json: 项目配置文件。
• pnpm-lock.yaml: pnpm 锁文件，记录项目的依赖信息。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts。该文件负责定义 h 函数，用于创建虚拟 DOM 节点，并演示了如何使用 block 函数和 render 函数。

// 引入所需的模块
import { render } from './render';
import { block } from './block';
import { h } from './h';

// 使用 h 函数创建虚拟 DOM 节点
const vnode = h('div', { id: 'foo' }, 'hello');

// 使用 render 函数将虚拟 DOM 转换为真实 DOM
const el = render(vnode);

// 将真实 DOM 挂载到页面
document.body.appendChild(el);

3. 项目的配置文件介绍

项目的配置文件主要包括 package.json 和 tsconfig.json。

• package.json: 定义了项目的元数据、依赖项、脚本等。

{
  "name": "hundred",
  "version": "1.0.0",
  "description": "A toy block virtual DOM based off of Million.js",
  "main": "index.js",
  "scripts": {
    "start": "ts-node src/index.ts"
  },
  "devDependencies": {
    "typescript": "^4.0.0",
    "ts-node": "^10.0.0"
  }
}

• tsconfig.json: TypeScript 配置文件，指定了 TypeScript 编译器的选项。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

通过这些配置文件，项目可以正确地编译和运行。使用 npm start 命令可以启动项目。

hundred Build your own mini Million.js 项目地址: https://gitcode.com/gh_mirrors/hu/hundred