后端【免费下载链接】automergeA JSON-like data structure (a CRDT) that can be modified concurrently by different users, and merged again automatically.项目地址https://gitcode.com/gh_mirrors/au/automerge点击查看免费下载Automerge 是一个基于 CRDT 的 JSON 风格数据结构库其核心计算逻辑由 Rust 编译为 WebAssembly因此在前端工程中能否正确打包 WASM 模块直接决定了 Automerge 能否在浏览器环境运行。本文以仓库中现成的 webpack 示例 为主线讲解如何在 Webpack 5 中开启asyncWebAssembly实验特性、配置浏览器与 Node 双目标构建并结合仓库源码分析其底层打包原理读完即可在自有工程中复现并验证这一集成方案。为什么需要专门的 Webpack 配置automerge/automerge的 JavaScript 实现由 WASM 提供底层支持见 javascript/package.json 中description: Javascript implementation of automerge, backed by automerge/automerge-wasm。在浏览器里使用 Webpack 打包这类依赖时Webpack 默认不会处理.wasm文件必须显式启用异步 WebAssembly 支持否则构建会报错或无法加载 WASM 模块。Webpack 5 内置了对 WASM 的支持但要启用它需要在配置中开启experiments.asyncWebAssembly。这是 Automerge 在 Webpack 5 下能正常运行的前提条件也是本示例配置的核心所在。读取示例项目结构与依赖仓库中的示例工程位于 javascript/examples/webpack其结构如下src/index.js演示代码同一份代码同时兼容浏览器与 Nodepublic/index.html浏览器入口页面加载打包产物webpack.config.js双目标web与nodeWebpack 配置package.json依赖声明与脚本定义。示例的 package.json 声明了如下依赖{ dependencies: { automerge/automerge: 2.1.0-alpha.11 }, devDependencies: { serve: ^13.0.2, webpack: ^5.72.1, webpack-cli: ^4.9.2, webpack-dev-server: ^4.11.1, webpack-node-externals: ^3.0.0 } }其中serve用于以静态服务器方式预览构建产物webpack与webpack-cli提供打包能力webpack-node-externals用于 Node 目标构建时将依赖声明为外部模块详见下文双目标配置一节。当前仓库中automerge/automerge主包已迭代到 3.5.0见 javascript/package.json示例锁定的 2.1.0-alpha.11 仅为该示例编写时的版本读者在自己工程中可直接使用最新稳定版。核心配置开启 asyncWebAssembly 实验特性示例在 webpack.config.js 中给出了最基础的浏览器端配置const path require(path) const clientConfig { experiments: { asyncWebAssembly: true }, target: web, entry: ./src/index.js, output: { filename: main.js, path: path.resolve(__dirname, public), }, mode: development, // or production performance: { // we dont want the wasm blob to generate warnings hints: false, maxEntrypointSize: 512000, maxAssetSize: 512000, }, } module.exports clientConfig各配置项含义如下experiments: { asyncWebAssembly: true }开启 Webpack 5 的异步 WebAssembly 支持。Automerge 的 WASM 模块通过WebAssembly.instantiate异步实例化因此必须使用异步模式这是整个集成的关键开关。target: web产物面向浏览器环境使 Webpack 按浏览器语义处理模块。entry与output指定入口文件./src/index.js产物输出为public/main.js。mode: development开发模式便于调试生产环境可改为production配置注释中已标明。performancehints: false用于关闭性能提示因为 WASM 二进制 blob 体积较大默认会触发 asset size limit 警告maxEntrypointSize与maxAssetSize设为 512000512 KB作为提示阈值上限。打包完成后public/index.html通过script srcmain.js/script引入产物见 public/index.html即可在浏览器中运行 Automerge。同一份代码浏览器与 Node 双目标运行示例的巧妙之处在于src/index.js中写入的代码同时适用于浏览器和 Node 环境import * as Automerge from automerge/automerge // hello world code that will run correctly on web or node let doc Automerge.init() doc Automerge.change(doc, d (d.hello from automerge)) const result JSON.stringify(doc) if (typeof document ! undefined) { // browser const element document.createElement(div) element.innerHTML JSON.stringify(result) document.body.appendChild(element) } else { // server console.log(node:, result) }这段代码先用Automerge.init()创建空文档再通过Automerge.change(doc, d (d.hello from automerge))写入一个字段最后序列化输出。它利用typeof document ! undefined区分运行环境浏览器端把结果渲染到 DOMNode 端直接打印到控制台从而验证同一套 API 在两种环境下的可用性。配套的 webpack.config.js 实际导出了一个配置数组module.exports [serverConfig, clientConfig]同时构建两个目标const serverConfig { // basic setup for bundling a node package target: node, externals: [nodeExternals()], externalsPresets: { node: true }, entry: ./src/index.js, output: { filename: node.js, path: path.resolve(__dirname, dist), }, mode: development, // or production }Node 目标的要点target: node产物面向 Node 运行时externals: [nodeExternals()]借助webpack-node-externals将node_modules中的依赖排除在打包之外交由 Node 在运行时自行require避免重复打包externalsPresets: { node: true }按 Node 内置模块如fs、path语义处理外部依赖产物输出到dist/node.js。由此同一个src/index.js可以分别打出浏览器用的public/main.js与 Node 用的dist/node.js这正是 package.json 中test: node dist/node.js脚本能直接运行的原因。运行示例在 javascript/examples/webpack 目录下执行npm install npm run startnpm run start对应serve public见 package.json即以静态服务器方式托管public目录浏览器访问后即可看到页面渲染出的文档序列化结果。若需单独验证 Node 端可执行npm test它会运行node dist/node.js输出node: {...}结果。源码视角WASM 是如何被加载的从源码结构看automerge/automerge针对不同打包器与运行环境准备了多个入口点全部位于 javascript/src/entrypointsfullfat_base64.ts将 WASM 以 base64 内嵌进 JS不依赖独立的.wasm文件加载适合对产物文件数量敏感的场景fullfat_bundler.ts通过打包器的 asset 机制引用独立的 WASM 文件fullfat_node.ts/fullfat_workerd.ts分别面向 Node 与 Cloudflare Workerd 运行时slim.ts延迟初始化 WASM 的精简入口。例如 fullfat_base64.ts 的完整实现只有三行import { UseApi } from ../low_level.js import * as api from ../wasm_bindgen_output/web/index.js UseApi(api) export * from ../index.js它把 wasm-bindgen 生成的 web 版本 API 注入底层实现UseApi再导出 index.ts 中的全部高层 API。相应地package.json 的exports字段为webpack条件指定了fullfat_base64入口webpack: { import: ./dist/mjs/entrypoints/fullfat_base64.js, ... }同时browser条件指向fullfat_bundler。这意味着当 Webpack 打包时它会依据条件解析命中webpack或browser分支进而决定以 base64 内嵌还是独立文件方式携带 WASM——两种方式都要求开启asyncWebAssembly才能正确实例化。仓库中的自动化验证packaging tests仓库在 javascript/packaging_tests 下提供了完整的打包回归测试用真实打包器组合验证上述机制。其中与本文主题直接相关的包括webpack_cjs_fullfatCommonJS 语法 全量包webpack.config.js 同样开启experiments.asyncWebAssemblyindex.js 用require(automerge/automerge)引入webpack_esm_fullfatES Module 语法 全量包index.js 用import * as am from automerge/automerge引入webpack_cjs_slim/webpack_esm_slim对应 slim 精简包版本。这些测试页面的校验逻辑体现了 WASM 异步初始化的特点。以 webpack_esm_fullfat/index.js 为例它调用am.wasmInitialized()等待 WASM 就绪再在setTimeout后创建文档并渲染到#result元素。驱动这些用例的脚本 run.mjs 会先用npm pack打包当前版本安装进临时项目执行webpack构建再启动静态服务器并用 Puppeteer 打开页面断言页面中#result的文本等于hello automerge见loadTestPage与runWebpackTest函数。如果 Webpack 构建失败、服务器退出或文本不符测试即报错退出。从这些测试可以看出两点工程实践一是 Webpack 5 下 Automerge 的合法打包方式就是开启experiments.asyncWebAssembly二是真实页面中应通过wasmInitialized()或等价的初始化信号确保 WASM 实例化完成后再执行 CRDT 操作避免竞态。常见问题与注意事项结合示例配置与源码实现实践中有以下几点值得注意不要遗漏experiments.asyncWebAssembly这是 Webpack 5 加载 WASM 的开关示例与全部 packaging 测试都依赖它遗漏会导致构建报错或运行时无法实例化 WASM。性能警告是预期的WASM blob 体积较大触发performance提示属正常现象示例通过hints: false关闭或调高阈值即可。异步初始化时序Automerge 的 WASM 实例化是异步的页面/模块加载初期不要立即执行 CRDT 操作可参考 packaging 测试中wasmInitialized().then(...)的写法等待初始化完成。Node 目标记得排除依赖若同时构建 Node 版本使用webpack-node-externals与externalsPresets: { node: true }避免把node_modules重复打进产物。版本对齐示例锁定的automerge/automerge2.1.0-alpha.11较旧当前仓库主版本为 3.5.0见 javascript/package.json新工程建议直接使用最新版本其入口条件解析webpack/browser仍然兼容本文所述配置方式。小结在 Webpack 5 中集成 Automerge核心只需一步在配置中开启experiments: { asyncWebAssembly: true }其余按常规方式设置target、entry、output即可。仓库的 webpack 示例 给出了浏览器与 Node 双目标的完整可运行配置packaging_tests 则用自动化测试验证了该方案在 CJS/ESM、fullfat/slim 等组合下的正确性。按照示例完成npm install与npm run start即可在浏览器中直接体验 Automerge 的 CRDT 文档能力。赞分享后端【免费下载链接】automergeA JSON-like data structure (a CRDT) that can be modified concurrently by different users, and merged again automatically.项目地址https://gitcode.com/gh_mirrors/au/automerge点击查看免费下载相关推荐PDF.js 与 Webpack 集成实战从双入口打包配置到 Worker 零配置加载PDF.js 与 Webpack 集成实战从双入口打包配置到 Worker 零配置加载 本文以仓库中的 examples/webpack https://li前端TensorFlow.js WASM 后端与 Webpack 集成实战用 file-loader 打包 .wasm 并通过 setWasmPaths 配置二进制路径TensorFlow.js WASM 后端与 Webpack 集成实战用 file loader 打包 .wasm 并通过 setWasmPaths 配置二进人工智能机器学习深度学习前端后端抖音批量下载教程3 条命令存下博主整个主页抖音批量下载教程3 条命令存下博主整个主页 Douyin Downloader 是一个开源的抖音批量下载工具也叫抖音下载器把博主主页链接粘进配置文件终网页爬虫CLI上一篇深度解析rgthree-comfy的Power Lora Loader如何实现AI绘画多模型智能管理下一篇打造个人数字图书馆novel-downloader 200小说网站离线下载终极指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考