如何在不升级至Webpack 5的React项目中使用Automerge？

方案1：使用纯JavaScript构建版本 #

Automerge提供了不依赖WebAssembly的纯JS发行版，无需修改Webpack配置就能直接用：

• 安装完成后，直接引入纯JS入口文件：

// ES模块环境
import Automerge from "@automerge/automerge/dist/automerge.esm.js"

// CommonJS环境
const Automerge = require("@automerge/automerge/dist/automerge.cjs.js")

这个版本性能略逊于Wasm版，但满足多数业务场景完全没问题。

方案2：给Webpack 4配置Wasm支持 #

如果必须用WebAssembly版本，可通过以下步骤适配Webpack 4：

1. 安装依赖loader：

npm install --save-dev wasm-loader

2. 修改webpack配置文件，添加Wasm处理规则：

module.exports = {
  // 保留你原有的其他配置
  module: {
    rules: [
      // 其他已有的loader规则
      {
        test: /\.wasm$/,
        type: "javascript/auto", // 禁用Webpack默认的Wasm处理逻辑
        use: [
          {
            loader: "wasm-loader",
            options: {
              sync: false // 启用异步加载，适配浏览器环境
            }
          }
        ]
      }
    ]
  },
  node: {
    fs: 'empty' // 规避Automerge依赖的fs模块在浏览器环境报错
  }
}

3. 代码中异步引入Automerge：

import("automerge").then(Automerge => {
  // 在这里编写Automerge相关逻辑
})

内容的提问来源于stack exchange，提问作者meaholik