Javascript 将AMD/Require模块与Aurelia一起使用

我们正在考虑将我们的Durandal应用程序更新为Aurelia（最终）。我们现在最担心的是代码重用。我们将为视图逻辑编写TypeScript，但是有很多复杂的客户端媒体访问（webRTC之类的东西）需要花费大量时间才能作为原始

JavaScript

AMD模块工作

我见过关于使用AMD ViewModels的问题；我想问一下在新的aurelia viewmodels中使用AMD模块的问题

作为一个简单的例子，我有一个

mediaDeviceScanner.js

模块：

define(["modules/logger"], function (logger) {
    'use strict';
    const mediaDeviceScanner = {};

    mediaDeviceScanner.scanDevices = function() {
        return navigator.mediaDevices.getUserMedia({video:true}).then(function(stream) {
            return stream;
        }).then(function(stream) {
            return navigator.mediaDevices.enumerateDevices().then(function (availableDevices) {
                const mediaDevices = [];
                for (let i = 0; i < availableDevices.length; ++i) {
                    const deviceCandidate = availableDevices[i];
                    if ((deviceCandidate.kind === "videoinput") && deviceCandidate.deviceId != "default" && deviceCandidate.deviceId != "communications") {
                        mediaDevices.push({ label: deviceCandidate.label, kind: (deviceCandidate.kind == "videoinput" ? "Camera " : "Microphone ") + (mediaDevices.length + 1), id: deviceCandidate.deviceId });
                    }
                }
                return mediaDevices;
            }).catch(function (error) {
                logger.log(error, logger.logLevels.warning, logger.features.webcam, logger.features.webcam);
            });
        })
    }

    return mediaDeviceScanner;
});

---

在评估“框架转换”成本之前，我想先了解一下会有什么样的“重用成本”。

关于这个话题有一个老问题。 它本质上归结为您正在使用的加载程序。默认情况下，Aurelia CLI使用requirejs，但最近得到了支持SystemJS的更新。有了它，就有可能，如参考问题中所述，为现有代码创建包装器。包装可以很薄，甚至可以通用，以节省大量的样板文件

--编辑-- 出于兴趣，我刚刚在一个新的基于SystemJS的CLI项目中快速试用了它

搭建之后，我将您的示例模块放置在

scripts/amd/media device scanner.js

删除了记录器依赖项，因为您的示例中没有提供它

转到

src/app.js

并在构造函数中添加以下代码：

System.import（'../scripts/amd/media device scanner.js'）。然后（（结果）=>{
result.scanDevices（）；
}

---

仍然像一个魅力；）

顺便说一句。来自Durandal，您可能还想看看，以便支持KO绑定并保留原始模板而不进行大量修改

define(["amd/mediaDevices/mediaDeviceScanner"],function(mediaDeviceScanner){
    mediaDeviceScanner.scanDevices().then(function(devices){alert('woot')});
});