创建一个跨平台的 JavaScript 库

Question

我目前正在开发一个针对不同 javascript 运行时环境（即节点、现代浏览器）的库。因此，我有一个 npm 项目，使用 babel 编写 ES6 代码，将其转换为在节点中运行并执行测试。

现在我遇到了必须为不同的目标平台编写模块的情况，例如我需要使用 Web Audio Api（节点不支持）来生成一些声音。我的想法是创建一个提供统一接口的模块（例如sound.js），无论针对哪个目标平台，但具有与运行时环境相对应的依赖项。此外，对于不同的依赖项，我必须在 sound.js 中提供不同的实现，据我了解，这称为 shimming（或适配器模式）。下图说明了我对这个过程如何工作的想法：

-- src
  -- modules
    -- sound.js
       ...
  -- node_modules
       -- webAudio
       -- nodeAudio

sound.js 内部

...
// if target == web
import * from 'webAudio'
// if target == node
import * from 'nodeAudio'
...
function playSound() {
    //if platform == 'node'
    nodeAudio.play()

    //if platform == 'browser'
    webAudio.play()
}

在这一点上，我只是被 JavaScript 世界中跨平台开发的世界所淹没。据我了解，我会将 webpack 添加到 babel 并为每个平台捆绑不同的 dist/ 包。但我没有找到任何关于如何实现 sound.js shim 的资源。所以...

上面的这个概念是构建跨平台库的可行方法吗？如果不是，我在哪里可以找到有关此场景的资源？

Answer 1

TL;DW 我最终使用了这个奇妙的blog post 中提到的不同方法。

主要是浏览器化以填充依赖项并添加各种 grunt 任务以进行测试和 linting。