如何无需额外插件让React.js使用含Wasm的npm包？

方法1：把Wasm内联到JS代码里（适合小体积Wasm） #

修改你的Rollup配置，让@rollup/plugin-wasm把Wasm转成base64字符串直接嵌到输出的JS bundle里，这样用户安装后不用管任何资源复制的事，Webpack会直接处理这个JS文件。

更新你的rollup.config.js：

import { wasm } from '@rollup/plugin-wasm';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'cjs'
  },
  plugins: [
    wasm({
      inline: true // 开启内联模式，把Wasm转成base64嵌入JS
    })
  ]
};

重新构建你的包后，dist里的JS文件就包含了Wasm的全部内容，用户在React项目里导入使用时不会遇到资源找不到的问题，也不需要装任何额外插件。

方法2：让Webpack自动识别并处理Wasm资源（适合大体积Wasm） #

如果Wasm文件太大，内联会导致JS bundle臃肿，可以调整Rollup配置，让输出的代码能被Create React App内置的Webpack自动识别Wasm资源：

1. 修改rollup.config.js，指定Wasm文件的输出路径，确保和JS文件在同一目录：

import { wasm } from '@rollup/plugin-wasm';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'cjs',
    assetFileNames: '[name][extname]' // 保持Wasm文件名不变
  },
  plugins: [
    wasm({
      fileName: '[name].wasm' // 指定Wasm输出为同名文件
    })
  ]
};

2. 在package.json里添加files字段，确保Wasm文件被打包进npm包：

{
  // ...其他已有字段
  "files": [
    "dist/my-library.js",
    "dist/example.wasm"
  ]
}

这样配置后，用户安装你的包后，Create React App的Webpack会自动识别JS中引用的Wasm文件，把它复制到构建输出目录，无需用户手动配置copy-webpack-plugin。

测试步骤 #

1. 重新构建你的npm包：

npm run build

2. 在Create React App项目里安装本地包测试：

npm install ../path/to/your/my-library

3. 启动React应用，loadWasm应该能正常加载Wasm实例，不会出现资源加载失败的错误。

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