TinyBase 项目基础教程：模块导入指南

TinyBase 项目基础教程：模块导入指南

tinybase The reactive data store for local‑first apps. 项目地址: https://gitcode.com/gh_mirrors/ti/tinybase

前言

在现代前端开发中，模块化已经成为标配。作为一款轻量级的状态管理库，TinyBase 提供了灵活的模块导入方式。本文将详细介绍如何在项目中正确导入和使用 TinyBase 的各种模块。

基础导入方式

最简单的 TinyBase 导入方式如下：

import { createMetrics, createStore } from 'tinybase';

这条语句会从主模块中导入最核心的两个功能：创建存储(Store)和创建指标(Metrics)。主模块包含了 TinyBase 的大部分核心功能，适合大多数基础场景。

功能模块分类

TinyBase 采用模块化设计，主要分为以下几类：

核心模块

• store: 基础数据存储功能
• metrics: 数据指标计算
• indexes: 索引管理
• relationships: 数据关系处理
• queries: 数据查询
• checkpoints: 状态快照
• mergeable-store: 可合并存储
• common: 公共工具

扩展模块

• persisters: 数据持久化
• synchronizers: 数据同步
• ui-react: React 集成
• ui-react-dom: React DOM 组件

按需导入策略

完整导入 vs 按需导入

对于小型项目，直接导入主模块是最简单的选择：

import { createStore } from 'tinybase';

对于大型项目或对包体积敏感的场景，可以按需导入子模块：

import { createStore } from 'tinybase/store';
import { createMetrics } from 'tinybase/metrics';

现代打包工具(如 Webpack、Rollup)的 Tree Shaking 功能可以有效优化最终包大小。

特殊场景导入

1. 持久化模块：需要单独导入

   import { createSessionPersister } from 'tinybase/persisters/persister-browser';
   

2. React 集成：需要额外导入 UI 模块

   import { useCell } from 'tinybase/ui-react';
   

高级导入选项

Omni 模块

TinyBase 提供了一个包含所有功能的 omni 模块：

import { createStore, createSqliteBunPersister } from 'tinybase/omni';

注意：使用此模块需要确保打包工具能有效进行 Tree Shaking。

压缩版本

TinyBase 提供了压缩版本，位于 min 目录下：

import { createStore } from 'tinybase/min'; // 压缩版
import { createStore } from 'tinybase';     // 未压缩版

类型支持

对于 TypeScript 项目，可以使用 schema-aware 类型定义：

import { createStore } from 'tinybase/with-schemas';

特殊环境适配

React Native 适配

在 React Native 环境中，可能需要明确指定文件路径：

import { createStore } from 'tinybase/index.js';
import { useCell } from 'tinybase/ui-react/index.js';

ESLint 配置

如果遇到模块解析问题，可能需要调整 ESLint 配置，禁用 no-unresolved 规则。

最佳实践建议

1. 对于新项目，建议从主模块开始
2. 随着项目规模扩大，逐步转向按需导入
3. 生产环境建议使用压缩版本
4. TypeScript 项目推荐启用 schema 类型支持
5. 定期检查打包结果，确保没有引入无用代码

总结

TinyBase 提供了灵活的模块导入方案，开发者可以根据项目需求选择最适合的方式。理解这些导入策略有助于优化应用性能并提高开发效率。

下一步，可以继续了解 TinyBase 与 TypeScript 的深度集成，以获得更好的类型安全和开发体验。

tinybase The reactive data store for local‑first apps. 项目地址: https://gitcode.com/gh_mirrors/ti/tinybase