如何让Rollup将外部模块中的Wasm代码嵌入TypeScript库打包产物？

我帮你梳理下问题核心：你依赖的ed25519-raw是用wasm-pack --target web生成的，这种目标下的Wasm模块默认采用异步加载逻辑，不会直接把Wasm内容嵌入到JS代码中；而你的Rollup配置既没正确触发Wasm的嵌入流程，也没处理好模块初始化的依赖关系，最终导致产物里只有空的加载函数，没有实际的Wasm内容。

下面是具体的解决步骤和配置修改：

1. 调整Rollup插件顺序并配置Wasm内联 #

@rollup/plugin-wasm需要在resolve和commonjs之前执行，这样它才能优先识别并处理Wasm模块；同时开启target: 'inline'选项，强制把Wasm内容转成Base64字符串嵌入到打包产物里。

修改你的Rollup配置文件：

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "rollup-plugin-typescript2";
import multi from "@rollup/plugin-multi-entry";
import wasm from "@rollup/plugin-wasm";

export default {
  input: [`typescript/src/index.ts`],
  output: {
    sourcemap: true,
    format: "cjs",
    name: "ed25519",
    file: `typescript/dist/bundle.cjs.js`
  },
  plugins: [
    multi(),
    // 将wasm插件移至前端，优先处理Wasm模块
    wasm({
      target: 'inline', // 强制内联Wasm为Base64格式
      sync: true // 生成同步加载逻辑，适配你的导出需求
    }),
    typescript(),
    resolve({ browser: true, extensions: [".js", ".ts", ".wasm"] }),
    commonjs({
      include: ["node_modules/**"],
      // 显式声明ed25519-raw的导出项，确保CommonJS解析正确
      namedExports: {
        'ed25519-raw': ['seed_from_phrase', 'gen_keypair', 'initSync']
      }
    })
  ]
};

2. 修改入口文件，确保Wasm模块完成初始化 #

--target web生成的Wasm模块必须先初始化才能调用导出函数，你原来的代码直接导出函数，但这些函数依赖未加载的Wasm模块，所以需要在库内部完成初始化步骤。

修改typescript/src/index.ts：

import * as libEd from "ed25519-raw";

// 同步初始化Wasm模块（对应wasm插件的sync: true配置）
libEd.initSync();

export const seed_from_phrase = libEd.seed_from_phrase;
export const gen_keypair = libEd.gen_keypair;

3. 验证打包结果 #

重新执行打包命令：

node node_modules/.bin/rollup -c

现在查看打包产物，你会发现Base64编码的Wasm内容已经嵌入其中，_loadWasmModule函数会被initSync主动调用，你的导出函数也能正常依赖加载完成的Wasm模块运行。

关键细节说明 #

• 插件顺序：Wasm插件必须在resolve和commonjs之前执行，否则Rollup会把Wasm模块当成普通JS模块处理，无法触发嵌入逻辑。
• inline目标：target: 'inline'避免了单独分发Wasm文件的麻烦，适合纯JS库的分发场景。
• 同步/异步选择：如果你的场景允许异步加载，可以去掉sync: true，同时将入口文件改成异步初始化（比如导出一个init函数让用户调用）。

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