Emscripten中JS库代码对ES6 Map的特殊处理机制

在Emscripten项目中，开发者有时会遇到一个有趣的现象：当在JavaScript库代码中使用ES6的Map对象时，最终生成的代码中Map会被转换为普通对象。这种现象源于Emscripten对JS库代码的特殊处理机制。

问题现象

当开发者在Emscripten的库代码中这样定义：

var LibraryWebGPU = {
  $WebGPU: {
    Internals: {
      buffers: new Map(),
    }
  }
};

最终生成的JS代码却变成了：

var WebGPU = {
  Internals: {
    buffers: {},
  }
};

这会导致后续调用buffers.set()方法时抛出"buffers.set is not a function"的错误，因为普通对象确实没有set方法。

根本原因

这一现象源于Emscripten处理JS库代码的特殊方式。Emscripten在构建过程中会通过Node.js读取并处理JS库代码，然后使用自定义的stringifyWithFunctions方法重新序列化这些代码。

stringifyWithFunctions方法的设计初衷是保留函数定义，但对于其他类型的对象，它会进行JSON序列化。当遇到new Map()这样的表达式时，它首先会执行这个表达式，得到一个Map实例，然后尝试序列化这个实例，最终将其转换为普通对象。

解决方案

目前有几种可行的解决方法：

1. 延迟初始化法：在函数中初始化Map

var LibraryWebGPU = {
  $WebGPU: {
    Internals: {
      buffers: undefined,
      init: function() {
        WebGPU.Internals.buffers = new Map();
      }
    }
  }
};

2. 字符串表示法：直接使用字符串表示

var LibraryWebGPU = {
  $WebGPU: {
    Internals: {
      buffers: 'new Map()',
    }
  }
};

3. 使用__postset：在postset阶段初始化

var LibraryWebGPU = {
  $WebGPU__postset: 'WebGPU.Internals.buffers = new Map();',
  $WebGPU: {
    Internals: {
      buffers: undefined,
    }
  }
};

未来改进方向

从技术角度看，Emscripten可以改进stringifyWithFunctions方法，使其能够识别并保留ES6新增的数据结构如Map、Set和WeakMap的初始化表达式。这需要对序列化逻辑进行扩展，使其能够检测这些特殊类型的构造函数调用。

总结

Emscripten对JS库代码的处理机制虽然强大，但在处理某些ES6特性时存在局限性。开发者需要了解这一机制，并采用适当的变通方法。随着Emscripten的持续发展，未来可能会原生支持更多现代JavaScript特性，简化开发者的工作流程。