如何在 Webpack 中使用 webrtc-adapter (adapter.js) shim？答案

【问题标题】：How to use webrtc-adapter (adapter.js) shim in Webpack?如何在 Webpack 中使用 webrtc-adapter (adapter.js) shim？
【发布时间】：2016-05-09 09:25:14
【问题描述】：

我有一个使用 Webpack 捆绑的 commonjs 浏览器应用程序（打字稿）。它使用 webrtc，所以我想使用webrtc-adapter package from npm。它是 adapter.js 的包，它使在 firefox 和 chrome 之间使用 webrtc 更容易。

在我的模块中，我希望能够访问修改后的导航器项。例如，我可以简单地调用：

navigator.mediaDevices.getUserMedia

如果我需要包，我可以让它工作，然后在我的模块中的某处使用变量，如下所示：

var webrtc = require("webrtc-adapter");
// somewhere in module
console.log(webrtc.browserDetails);

但是，我不需要通过 webrtc-adapter 访问 browserDetails 或任何公开的项目，我只想使用 navigator 对象上的填充调用。我尝试过使用 webpack.ProvidePlugin 和 externals，但两者仍然要求我在某处使用该对象。

有没有一种方法可以将已填充的导航器加载到每个模块中，而无需在模块中的某处使用该变量？我知道我可以在配置中使用 external ，然后通过单独的脚本标签加载它，但我更愿意让 webpack 将它们捆绑在一起。

【问题讨论】：

标签： webpack

【解决方案1】：

你试过像这样要求它吗？

require('webrtc-adapter');

【讨论】：

这行得通。谢谢。如果执行此操作，TypeScript 会输出错误“找不到名称要求”。添加declare function require(moduleName: string) 修复了它。

【解决方案2】：

对于普通的 Webpack：

var a = require('webrtc-adapter');

对于打字稿。如果你还想要一些类型，也可以使用 @types/webrtc 的引用标签。

/// <reference types="webrtc" />
import 'webrtc-adapter';

【讨论】：