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

Question

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

我看到了有关使用 AMD ViewModel 的问题；我问的是在新的 aurelia 视图模型中使用 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 视图模型中调用 mediaDeviceScanner.scanDevices 的最佳途径是什么？

在我的 Durandal 虚拟机中，我有这个：

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

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

Answer 1

关于这个话题有一个老问题。 Using AMD module as an Aurelia ViewModel 它基本上归结为您使用的是哪个加载器。 Aurelia CLI 默认使用 requirejs，但最近获得了支持 SystemJS 的更新。如此一来，如引用的问题中所述，可以为现有代码创建包装器。包装器可能非常薄，甚至可以通用化以节省大量样板

--编辑-- 出于兴趣，我刚刚快速尝试了一个基于 SystemJS 的新 CLI 项目。

1. 在搭建脚手架后，我已将您的示例模块放入scripts/amd/media-device-scanner.js
2. 删除了记录器依赖项，因为您的示例中没有提供它
3. 转到src/app.js 并在构造函数中添加以下代码：

System.import('../scripts/amd/media-device-scanner.js').then((result) => { result.scanDevices(); }

仍然像一个魅力;）