RxDB 安装与构建配置完全指南:npm 安装、polyfills、global 变量修复与导入方式 数据库NoSQL嵌入式数据库实时数据库【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址https://gitcode.com/gh_mirrors/rx/rxdb点击查看免费下载RxDB 是一个 local-first 的实时 NoSQL 数据库能够在浏览器、Node.js、React Native、Electron 等几乎所有 JavaScript 运行时中运行。本文是 RxDB 的官方安装指南覆盖从 npm 安装主包与 peer 依赖rxjs、为老浏览器补齐 polyfills、修复 Angular/Webpack 场景下global is not defined报错到项目配置参考、安装最新开发构建以及最终导入并使用createRxDatabase的完整流程。读完本文你将能够在一个全新项目中快速、稳定地把 RxDB 跑起来并避开最常见的构建期陷阱。通过 npm 安装 RxDB安装最新发布的rxdb主包及其运行时依赖并保存到package.json在项目根目录执行npm install rxdbrxdb的 npm 包是双格式dual package发布main指向 CommonJS 产物./dist/cjs/index.jsmodule指向 ESM 产物./dist/esm/index.js同时通过exports字段为每个子路径插件提供了独立的types、require和import入口见仓库根目录 package.json。因此无论你使用 webpack、Rollup、Vite 还是直接跑在 Node.js 上都可以被正确解析。除了 npmRxDB 官方还维护了其他常见包管理器的安装命令。文档站点中的安装命令由 install-tabs.tsx 这个组件统一渲染你可以按自己的工具链选择其一# yarn yarn add rxdb # pnpm pnpm add rxdb # bun bun add rxdb # deno通过 npm 兼容层 deno add npm:rxdb从仓库 package.json 可以看到当前 RxDB 的engines字段声明node: 20因此在 Node.js 环境使用时应确保 Node 版本不低于 20。安装 peer 依赖rxjsRxDB 的响应式能力建立在 RxJS 之上因此rxjs被声明为peerDependencies当前版本要求rxjs: ^7.8.2见 package.json。如果项目里还没有安装过它必须手动安装npm install rxjs同样的其他包管理器也适用# yarn yarn add rxjs # pnpm pnpm add rxjs # bun bun add rxjs # deno deno add npm:rxjs之所以是 peer 依赖而不是普通依赖是为了避免与你的应用直接使用的rxjs版本产生重复实例。RxDB 中几乎所有订阅 API如RxQuery.$、RxDocument.done$返回的都是 RxJSObservable一旦出现两份不同的rxjs副本类型与行为都可能出现偏差因此请始终与主包保持同一版本。为旧浏览器安装 polyfillsRxDB 的源码使用 ES8 编写编译产物会向下转译到 ES5这一点从 package.json 的build:cjs脚本cross-env NODE_ENVes5 babel src --out-dir dist/cjs可以确认。这意味着在较老的浏览器上你可能需要引入 polyfill 来补齐 ES8 运行时缺失的能力。官方推荐使用 core-jsnpm i core-js --save安装后在应用的入口代码通常是main.ts或index.js的第一行中导入import core-js/stable;需要注意polyfill 是全局副作用代码必须在任何业务模块之前完成导入且通常只应出现在入口文件中。如果你的目标是现代浏览器或 Node.js 20 环境则不需要这一步。修复 Webpack 下的global is not defined错误在 Angular 或其他基于Webpack的框架中使用 RxDB 时你可能会遇到如下报错Uncaught ReferenceError: global is not defined原因在于RxDB 的某些依赖如broadcast-channel、ws等会假设存在 Node.js 特有的global全局变量而部分打包器不会在浏览器运行时注入该变量。解决办法是手动在 polyfill 文件中把这两个全局变量补齐RxDB 的 Angular 示例正是这样做的见 examples/angular/src/polyfills.ts(window as any).global window; (window as any).process { env: { DEBUG: undefined }, };这段代码做了两件事把浏览器的window对象挂到global上满足依赖对 Node 全局变量的假设补一个最小的process对象其中env.DEBUG置为undefined避免依赖读取process.env.DEBUG时抛出异常。在 Angular 项目中这段代码应放在src/polyfills.ts中且位于import zone.js之前在其他 Webpack 项目中可以放在webpack.config.js的entry数组最前面或作为单独的polyfills.ts入口。项目配置参考examples 与 config 目录为了帮助你快速对齐版本与配置RxDB 仓库内置了两类可直接参考的资源examples 目录存放了经过 CI 测试的完整示例工程覆盖 Angular、React、React Native、Vue、Svelte、Electron、Flutter、Ionic、Tauri、GraphQL、Supabase、Node 以及 vite-vanilla-ts 等多种框架与运行场景。以 Angular 为例examples/angular 中包含了src/app/services/database.service.ts数据库创建服务、src/app/schemas/hero.schema.ts集合 schema以及上文提到的src/polyfills.ts可以对照学习一个真实可运行的最小 RxDB 应用是如何组织起来的。config 目录暴露了项目自身使用的 Webpack、Rollup、Mocha、Karma、TypeScript 等基础配置文件。例如 config/webpack.config.js 展示了 RxDB 官方打包时的 Terser 压缩与 optimization bailout 检测策略config/tsconfig.types.json 则是类型声明的生成配置。这些文件可以帮助你为 RxDB 定制自己的构建管线。关于各依赖包的支持版本请以仓库根目录 package.json 中的dependencies、peerDependencies与devDependencies声明为准。当前版本中peerDependencies除rxjs外还包括react、vue、angular/core、preact/signals-core、firebase、mongodb、nats等——它们全部标记为可选见peerDependenciesMeta只有当你实际使用对应插件时才需要安装。安装最新开发构建git 依赖如果希望使用尚未发布到 npm 的最新开发状态可以把 RxDB 作为 git 依赖直接写进package.json{ dependencies: { rxdb: githttps://gitgithub.com/pubkey/rxdb.git#commitHash } }将commitHash替换为最新一次 build 提交的哈希仓库的提交记录中搜索 build 关键字即可定位仓库根目录 package.json 的build脚本会执行完整的build:cjs、build:esm、build:types与build:plugins流水线因此每次构建提交都会产生可用的dist产物。这种方式适合想提前尝鲜新特性或验证某个修复的场景对于正式项目仍建议使用 npm 上的稳定版本因为 git 依赖无法保证语义化版本兼容性。导入与使用 RxDB一切就绪后导入rxdb主入口即可使用核心 API。默认入口会导出 RxDB 核心的全部内容例如创建数据库的函数createRxDatabase完整导出清单见 src/index.tsimport { createRxDatabase, // 详见 docs-src/docs/rx-database.md /* ... */ } from rxdb;从当前版本的 package.json 的exports字段可以看到RxDB 同时支持按需子路径导入例如rxdb/plugins/core、rxdb/plugins/storage-dexie、rxdb/plugins/validate-ajv等。官方推荐的做法是只导入你实际需要的插件配合sideEffects: false声明让打包器可以更好地做 tree-shaking从而缩小最终 bundle。一个最小可运行的数据库创建示例结合 quickstart 中的用法import { createRxDatabase } from rxdb/plugins/core; import { getRxStorageDexie } from rxdb/plugins/storage-dexie; import { addRxPlugin } from rxdb/plugins/core; import { RxDBDevModePlugin } from rxdb/plugins/dev-mode; // 开发阶段建议开启 dev-mode 插件获得额外的校验与错误提示 addRxPlugin(RxDBDevModePlugin); const db await createRxDatabase({ name: mydatabase, storage: getRxStorageDexie() });其中addRxPlugin的插件注册机制实现在 src/plugin.ts插件通过原型覆盖、overwritable覆盖与钩子注册三种方式扩展 RxDB 核心且同名插件不可重复注册。关于数据库创建参数的完整说明name、storage、password、multiInstance、eventReduce等可以继续阅读 RxDatabase 文档。安装完成、polyfill 就绪并成功导入createRxDatabase之后你就已经打通了 RxDB 的第一步。接下来可以按官方 Quickstart 依次完成建集合、插文档、查询、订阅与同步也可以直接翻阅 examples 中与你技术栈匹配的完整示例工程。赞分享数据库NoSQL嵌入式数据库实时数据库【免费下载链接】rxdbThe local-first database that runs on every JS runtime and replicates with your existing backend - no vendor, no lock-in - https://rxdb.info/项目地址https://gitcode.com/gh_mirrors/rx/rxdb点击查看免费下载相关推荐Meteor 中高效使用 npm 包安装、导入、构建与异步适配完整指南Meteor 中高效使用 npm 包安装、导入、构建与异步适配完整指南 Meteor 是构建在 Node.js 之上的 JavaScript 应用平台npm后端前端开发工具移动开发RxJS 安装指南npm 安装、模块变体与类型定义配置全解析RxJS 安装指南npm 安装、模块变体与类型定义配置全解析 本篇指南完整讲解 RxJS 在 npm 生态中的安装方式覆盖 ES2015/CommonJS前端Bazel构建系统安装与配置完全指南Bazel构建系统安装与配置完全指南 项目基础介绍及主要编程语言 Bazel 是一个快速、可扩展的多语言构建系统由Google开发并维护。它支持多种编程语言包构建工具上一篇终极镜像加速指南DaoCloud 同步服务实践以 dify-web 为例下一篇终极解决FastChat中transformers库导入错误从安装到调试的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考